Am trying to override the history page in chrome using an extension. I have set the override page option in manifest.json file and created a new history.html file. The extension is running perfect and the history page showing blank now. I need to list all the history in my new override page history.html page. Is there any way to do this?
Here is my manifest.json file.
{
"name": "Recently visited urls",
"version": "1.0",
"description": "Recently visited urls",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["popup.js"]
}],
"background": {
"scripts": ["jquery.js","background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Recently visited urls",
"default_popup": "popup.html",
"default_icon": "clock.png"
},
"permissions": [
"history",
"downloads"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"chrome_url_overrides": {
"history": "history.html"
},
"manifest_version": 2
}
Thanks in advance!
If you mean why your customized history page is blank, have you declared history permission in your manifest.json?
Update:
Since chrome.history api can only be accessed through background scripts, we need to do message passing from background scripts to your override history page. However, we can't inject content scripts to chrome://history and after trying many methods, I think using localStorage is a workaround to solve this problem.
manifest.json
{
"name": "Search History",
"version": "1.0",
"manifest_version": 2,
"description": "Your description",
"chrome_url_overrides": {
"history": "history.html"
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"permissions": [
"history"
]
}
history.html (here I just concat all localStorage in a string, you can customize your view here)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="historyText"></p>
<script src="content.js"></script>
</body>
</html>
background.js (you can configure history items number by setting maxResults to other number)
chrome.browserAction.onClicked.addListener(function () {
chrome.history.search({ text: '', maxResults: 10 }, function (data) {
data.forEach(function(page) {
localStorage.setItem("Id: " + page.id + ", title: " + page.title, page.url);
});
});
});
content.js
var historyText = "";
for(var key in localStorage) {
historyText += key + ": " + localStorage.getItem(key) + ", ";
}
document.getElementById("historyText").innerText = historyText;
Related
What am I missing that popup is not being shown?
In an extension folder I have four files. I load that folder as extension. I can see the icon, but when I click on it popup is not shown. Why?
content_script.js: empty (just added so that I can load the extension)
icon.png: It is shown, when I load extension.
manifest.json:
{
"name": "Popup poc",
"version": "1.4",
"description": "Simple popup example",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}
],
"page_action": {
"default_name": "Display Map",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html:
<!doctype html>
<html>
<head>
<title>Popup</title>
</head>
<body>
This is body
</body>
</html>
Replace "page_action" with "browser_action" in your manifest.json. You should be able to see the popup on all pages this way.
It's possible duplicate of: Chrome extension popup not showing anymore
But it seems like I don't have enough reputation points to flag it for that.
Popups only for certain hosts URL patterns
(Edit)
If you want your popup available only on certain sites (for example, only on Google), then you need to specify declarativeContent permissions in your manifest, and also a little setup in a background script.
So, your manifest.json would look something like this:
{
"name": "Popup poc",
"version": "1.4",
"description": "Simple popup example",
"permissions": ["declarativeContent"],
"content_scripts": [
{
"matches": ["https://www.google.com/*"],
"js": ["content_script.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_name": "Display Map",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
Your background.js would look like this:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'www.google.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
This code is largely from the Getting Started Tutorial.
When user click the extension icon, it opens a sandboxed new page in new tab. From the page, I want to access data from storage. Didn't find any useful info from official doc, please enlighten me.
manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "My extension"
},
"permissions": ["activeTab", "tabs", "storage", "<all_urls>"],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"sandbox": {
"pages": ["newtab.html"]
}
}
background.js
chrome.browserAction.onClicked.addListener(function(tab){
chrome.tabs.create({
url: chrome.extension.getURL("newtab.html"),
})
});
newtab.html
<html>
<head>
<script src="vue.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body
</html>
app.js
window.addEventListener('load', function () {
// access data from storage
})
The reason I'm using a sandbox page, is because Im using Vue.js which needs to use eval.
So I was working on basic example and here is my requirement for chrome extension : The extension should be able to read the data from webpage and display it on the popup when icon clicked upon.
I have these files - manifest.json , popup.html , background.js , content.js , webPage.html (this is html file stored at my local machine and data is to be read from this page)
manifest.json
{
"name": "Test",
"version": "1.0",
"description": "Testing",
"permissions": ["file:///A:/Study/TestExt/webp.html"],
"content_scripts": [
{
"matches": ["file:///A:/Study/TestExt/webp.html"],
"js": ["content.js"]
}
],
"background": {
"persistent": true,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<html>
<head>
<script src= "background.js"></script>
</head>
<body>
<p id="writeWord"></p>
</body>
</html>
webp.html
<html>
<body>
<div >
<p id="readWord">WordToBeRead</p>
</div>
</body>
</html>
content.js
var innerText = document.getElementById("readWord").innerHTML;
var k = new Object();
k.textWord = innerText;
chrome.runtime.sendMessage(k, function(response) {
console.log("hello");
});
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.textWord == "WordToBeRead")
document.getElementById("writeWord").innerHTML = request.textWord;
});
So ideally when I click on extension icon I should get popup with word "WordToBeRead" but I am getting only empty popup. I can't figure it out where exactly I am going wrong.
I've spent hours and hours trying to figure out what's wrong with my chrome extension. I know that my function.js code is good because it works with an html page that I link it to, but perhaps it isn't right for chrome extensions?
All help is appreciated
manifest.json
{
"manifest_version": 2,
"name": "Font Find",
"description": "This extension allows you to click on any text, and find out what font it is written in.",
"version": "1.0",
"background": {
"page": "popup.html",
"persistent": true
},
"permissions": [
"activeTab",
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "Find the Font",
"default_icon": "icon.png"//,
// "default_popup": "popup.html"
},
"background": { "scripts": ["jquery.min.js"] },
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"function.js"
]
}
]
}
popup.html file (note it isn't set as the popup)
<!DOCTYPE HTML>
<html>
<head>
<!-- <link rel="stylesheet" href="popup.css"/> -->
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<script src="function.js"></script>
</head>
</html>
function.js file
"use strict";
$("body").append('Test');
document.body.ondblclick = function(event){
//event.stopPropagation();
var target = event.target || event.srcElement;
alert( "What you clicked on:" + $(target).text() + " It's font-family is: " + $(target).attr("font-family") );
}
function.js file
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: "function.js"
});
});
First, edit the manifest.json file. Add this code:
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
], "js": [
"jquery.min.js",
"function.js"
], "run_at": "document_start"
}]
And now, use this code in function.js file.
document.addEventListener("DOMContentLoaded", function() {
document.body.addEventListener("dblclick", function(e) {
var target = e.target;
alert("What you clicked on: " + $(target).text() + " It's font-family is: " + $(target).attr("font-family"));
}, true);
});
I tested this code and it works. I hope it helps.
I'm very much new to the whole chrome extensions world.
I've read through the tutorial "hello world" pages and tried to gain an understanding of content_scripts and background.html - but I may have overdosed and can't seem to find an answer to something I'm sure is a simple task.
In a tab a site contains the following Hidden HTML:
<div class="XYZ">
<input id="form_ID" type="hidden" value="REF_CODE#Product_CODE#Product Name#">
</div>
What I'm trying to figure out is how I can Display the
RefCode
ProductCode
Product Name
In a popup.html
I'm not looking at editing the html or manipulating it in any way.. it is strictly just displaying the hidden HTML - in an easy to read Popup.
Hope that makes sense..
Thanks in Advance.
UPDATE:
Popup.html
<html>
<head>
<script>
function readIds() {
console.log('Send request to content script');
document.getElementById("response").innerText = "Requesting...";
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
console.log('Response from page is:' + response);
document.getElementById("response").innerText = JSON.stringify(response);
});
});
}
</script>
</head>
<body style="width:400px;">
Click to read ids
<pre id="response"></pre>
</body>
</html>
Content_script.js
// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
switch (request.cmd) {
case "readIds":
console.log("readIds", request);
document.getElementById("productID");
sendResponse({refCode:1, productCode: 2, productName: 3});
break;
}
});
manifest.json
{
// Required
"name": "WP Debug",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "icon.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "icon.png", // optional
"default_title": "WP Debug", // optional; shown in tooltip
"popup": "popup.html"
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js" ],
"run_at": "document_idle"
}
]
}
Your popup needs to send a message to your content script which then gathers up the hidden field info and sends the response back to the popup.
Here is an example:
popup.html
<html>
<head>
<script>
function readIds() {
console.log('Send request to content script');
document.getElementById("response").innerText = "Requesting...";
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
console.log('Response from page is:' + response);
document.getElementById("response").innerText = JSON.stringify(response);
});
});
}
</script>
</head>
<body style="width:400px;">
Click to read ids
<pre id="response"></pre>
</body>
</html>
content_script.js
// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
switch (request.cmd) {
case "readIds":
console.log("readIds", request);
//TODO: Get real values to send from page
//e.g. document.getElementById("someid") etc
sendResponse({refCode:1, productCode: 2, productName: 3});
break;
}
});
mainfest.json
{
// Required
"name": "Foo Extension",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "foo.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "Foo.png", // optional
"default_title": "Foo Extension", // optional; shown in tooltip
"popup": "popup.html"
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js" ],
"run_at": "document_idle"
}
]
}
See documentation: http://code.google.com/chrome/extensions/messaging.html