I am trying to understand chrome background pages. I managed to get background.js script running after cannibalizing on the of examples and it pops up with an alert box every time a user visits a page. However, when I take the same script and move it to a background.html file, I cannot seem to get the file to execute.
I have updated the the manifest file to a page (instead of script) and the extension loads fine. I have also tried playing around with either having the javascript in a script tag directly in the body or in a function as it is now that is called onload on the body or in the head.
Perhaps I don't understand the concept of what a background.html page is used for in a Chrome extension?
Manifest file:
{
"name": "Testing Extension",
"version": "0.2",
"background": { "pages": ["background.html"] },
"permissions": [
"tabs", "https://mail.google.com/*", "http://*/*, https://*/*"
],
"browser_action": {
"name": "Do some action",
"icons": ["icon.png"]
},
"manifest_version": 2,
"web_accessible_resources": ["injectImage.js", "background.html"]
}
injectImage.js
alert('Got Here');
'use strict';
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript(null, {file: "injectImage.js"});
});
chrome.browserAction.setBadgeBackgroundColor({color: [0, 200, 0, 100]});
var i = 0;
window.setInterval(function () {
chrome.browserAction.setBadgeText({text: String(i)});
i++;
}, 10);
background.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.0.min.js"></script>
<script src="injectImage.js"></script>
</head>
<body>
</body>
</html>
currently this code doesn't seem to do anything other than put an icon in the top right corner.
Your background is only one page and acts like a local server that can send and receive data between the content_scripts and default_popup or other extension pages.
For anyone starting out, look at each example's manifest version, which is defined in manifest.json. Version 2 has stricter security policies and inline javascript is invalid so copying sample v1 code and pasting it into background.html will not work anymore. All scripts need to be in an external file that can be included in an HTML file using the src attribute like <script src="main.js"></script>
My understanding is that you have four commonly used components for a basic extension:
DOM of the tab being viewed which can only be accessed by content_scripts
content_scripts is an array of javascript files identified in manifest.json that are sequentially injected directly into the tab's DOM. Apparently the JS variables and functions from the tab and your content_scripts cannot interact.
One background HTML page which Chrome either generates by concatenating an array of scripts OR is defined as one page, commonly named background.html.
{"browser_action" : {"default_popup" : "popup.html"}} is an optional user interface defined in manifest.json that is displayed when someone clicks your extension icon. The popup has no way to reach the tab's DOM so if the tab's content matters then it must be requested using Chrome messages like chrome.extension.sendMessage
Your background is defined either as one or more scripts:
"background": {
"scripts": ["background.js"]
},
Or as a page:
"background": {
"page": "background.html"
},
If you want to find out what is happening inside of the background then you can use console.log but in order to inspect the output you have to launch the inspector from the Extensions page. You can even see that the background file is always named "_generated_background_page.html".
You have a typo in your manifest file. Including a background page should look like this:
"background": {"page": "background.html"}
OR you can directly define js instead of defining a background page and referencing a script file in it (Inline scripts are not allowed as per Content Security Policy (CSP))
"background": {
"scripts": ["background.js"]
},
For version 3
background pages are replaced by service_workers in MV3
Replace background.page or background.scripts with background.service_worker in manifest.json.
{
"manifest_version": 3,
"name": "",
"background": {
"service_worker": "background.js"
}
}
One more gotcha not mentioned here. Doing <script src="myscript"/> doesn't work :P, you have to type it out completely with <script src="myscript"></script>. Took me a bit to figure that out.
Related
I basically want to automate a website by using a Chrome extension. But this website has extremely much client-side code, so it's really hard to find out which request I need to make in order to get the needed information.
The easiest way I can think of would be to use a content script to enter text in input elements and click buttons, like this (with jQuery in this case):
$.ready(function(){
$("#input").val("foo");
$("#submit").click();
});
Quite similar to this question: Injecting input into a tab opened by a Chrome Extension, but the interaction with that website should not be visible.
So: Can I open pages in chrome from an extension, that are not visible to the user and use them to interact with websites?
If you want the page to be completely invisible, I believe that the only option is to load it into an iframe on the background page. You can then access the page within the iframe using content scripts, just as you would access any normal visible page.
Since many sites limit embedding using the X-Frame-Options header, you will likely have to use the webRequest API to remove that header before loading the page into an iframe. Some pages also use other techniques to prevent embedding that might further complicate this.
Example code:
manifest.json
{
"manifest_version": 2,
"name": "Hidden page in background",
"description": "Interact with a hidden page in background",
"version": "1.0",
"background": {
"page": "background.html",
"persistent": true
},
"content_scripts": [
{
"matches": ["*://*.google.fr/*"],
"js": ["contentscript.js"],
"all_frames": true
}
],
"permissions": ["*://*.google.fr/*", "webRequest", "webRequestBlocking"]
}
background.html
<!DOCTYPE html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
<iframe id="iframe1" width="1000 px" height="600 px" src="http://www.google.fr"></iframe>
</body>
</html>
background.js
// This is to remove X-Frame-Options header, if present
chrome.webRequest.onHeadersReceived.addListener(
function(info) {
var headers = info.responseHeaders;
var index = headers.findIndex(x=>x.name.toLowerCase() == "x-frame-options");
if (index !=-1) {
headers.splice(index, 1);
}
return {responseHeaders: headers};
},
{
urls: ['*://*.google.fr/*'], //
types: ['sub_frame']
},
['blocking', 'responseHeaders']
);
contentscript.js
var elementToInsert = document.createElement("h1");
elementToInsert.textContent = "This text comes from my content script.";
document.body.insertBefore(elementToInsert, document.body.firstChild);
Couple of notes:
The removal of X-Frame-Options header is not limited to the background page here. It would allow embedding of the relevant page in iframes on any other page as well. Unfortunately, Chrome does not seem to support the ALLOW-FROM uri value that could be used to limit embedding to your extension only.
Content script is being injected to all pages here. You could inject it programmatically only to the iframe on the background page, but that gets a bit more complicated.
I used www.google.fr as an example, because it uses X-Frame-Options, but does not use any other techniques to prevent embedding. I used the French domain because google.com tends to redirect to local country-level domains automatically.
See tabs.create, you could call the following code creating an invisible tab (not active).
chrome.tabs.create({ url: 'https://www.google.com', active: false, });
I started to learn today how to make chrome extension. All i want it to do is alert when i press the extension button.
My manifest.json file:
{
"name": "BrowserActionExtension",
"version": "0.0.1",
"manifest_version": 2,
"background": { "scripts": ["background.js"] },
"browser_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png"
},
"default_title": "That's the tool tip",
"default_popup": "popup.html"
}
}
i tied couple of things. The first was to run a script in the popup.html. but i read that i can't use inline scripts. My popup.html file:
<html>
<head>
<script src='script.js' type='text/javascript'></script>
</head>
<body>
Hello World!
</body>
</html>
and my script file:
<script>
console.log("clicked");
alert("hey");
</script>
none of them works, no alert and it doesn't write into the console.
last thing i tried was to use: chrome.browserAction.onClicked.addListener
I used in background script, i figured out it works once when the extension starts to work (didn't understand if it run for every tab or once i open the browser).
function dostuff() {
console.log("HEY")
alert("FDS");
}
chrome.browserAction.onClicked.addListener(dostuff);
How can i alert when the extension is pressed?
Thank you for your help and time
1) You should not wrap the contents of an included JavaScript file in <script> tag.
Remove it, and your example should work.
Oh, and by the way, that console.log("clicked"); will output into popup's own console. You can examine (and see the error about your code) by right-clicking the button and selecting "Inspect popup".
2) Your code in the background does not work, because the event does not fire while you're using a popup page. See here for more information.
I have a browserAction extension testing on chrome 31.0.1650.57. I want to get active tab url when the user click on the extension icon, save it and use it later.
I am able to do that when using tabs permission. But this permission has a lot of power (that I don't need) and users are complaining about this.
I followed the article to switch to activeTab permission http://developer.chrome.com/extensions/activeTab but it only works when there is no popup. As you can see in the make_page_red example.
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("★ tab.url", tab.url);
});
You can check by changing the make_page_red example manifest file to add a default popup like this:
{
"name": "Page Redder",
"description": "Make the current page red",
"version": "2.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Make this page red",
"default_popup": "popup.html" ←-------------------
},
"manifest_version": 2
}
Now because I have a default popup the browserAction.onClicked listener is not called anymore.
How can I get current tab url and still have my popup opening?
Thanks
browserAction.onClicked is not called anymore (as you noted), so just skip that:
popup.js:
chrome.tabs.query({active:true,currentWindow:true},function(tabArray){
console.log(tabArray[0].url);
});
And of course, have popup.html load popup.js with a script tag. (And I'm not sure what you're background script is doing.)
Edit:
In addition to the above, my extension has two other files. manifest.json is copied from yours, but has the background section deleted. The only other file is popup.html (from memory, so bear with me):
<html><body><script type="text/javascript" src="popup.js"></script></body></html>
To view the console, I click the browser action, which brings up a 50 pixel square window. Right click on that, "inspect element", and click console to view the url.
I'm trying to work on a Chrome browser extension which does fun things on a contextmenu. The problem is, I can't get the JS files to load within the manifest.json content_scripts.
I don't receive an error, the files simply do not load.
The scripts are good, if I put them in my background page, they fire fine through that background page. The downside of that is it's restricted to only the background page.
{
"name": "Mini",
"description": "Mini",
"permissions": ["contextMenus","management","contentSettings","tabs","http://*/*","https://*/*","editable"],
"version": "0.1",
"manifest_version": 1,
"background_page": "mini.html",
"icons" : {"16" : "mini.png"},
"contexts" : ["link","tab","page"],
"content_scripts": [{"matches":["<all_urls>"],"js":["jquery172min.js","mini.js"]}]
}
I've tried all forms of matches, including "http://\*/\*", "https://\*/\*", "\*://\*/\*"
I've tried whitespaces, no whitespaces. I'm drawing a blank here.
Any help would be appreciated.
$(document).ready(function () {
alert("page is ready");
},true);
My apologies for that. This is a copy of the javascript/Jquery I'm using to test whether the extension has loaded or not. It's just a simple alert.
Content scripts cannot use the chrome.contextMenus API (in fact, these can only use some of the chrome.extension methods).
It's possible to apply match patterns to individual menu items, via chrome.contextMenus.create({title: 'Test', documentUrlPatterns: 'http://*/*'});.
Created menu items can also be modified (chrome.contextMenus.update) and removed (chrome.contextMenus.remove).
To communicate between a Content script and the background page, see Message passing.
I am currently writing a chrome extension so that I have a button on the bar and when clicked I wanted it to grab the URL of the currently selected tab and open a new tab as follows:
FixedURL/grabbedURL ex: lets say the currently opened page is "http://www.abc.com" and the fixed url I assign is "http://www.123.com" so the new URL I want to be opened will be http://www.123.com/http://www.abc.com
This way only the second part of URL opened in a new tab will change depending on the selected tab.
I already created a manifest.json and the icons, title, etc...
I then tried to use both background.html and popup.html but to no avail.
I also am kinda lost on the whole .js file thing and how to link all of them together.
The maximum I could achieve is having chrome open:
chrome://settings/extensions/obidbojnjbigokbpalmaacmgmecopond/title.url
when I clicked the button.
Here is my manifest.json
{
"name": "Circumvent",
"version": "1.0",
"description": "Opens new tab",
"browser_action": {
"default_icon": "111.png",
"default_title": "Circumvent!",
"popup": "main.html"
},
"icons": {
"48": "111.png"
},
"permissions": [
"tabs","notifications","http://*/*"
]
}
Any idea of what a sample code will look like and/or a brief clarification would be really awesome and very helpful!
Thanks in advance....
P.S. my first extension
You should add a background page and have it listen for clicks on your extension's browser action button:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({"url" : "http://www.123.com/" + tab.url})
});
(This code goes in your background page.)
You'll need to remove the popup line in your manifest, since the onClicked handler won't fire if there's a popup (and besides, you don't want a popup, you just need a button).