After messing around with Chrome Extension I noticed that when you are on the chrome://extensions page a background script initiated in the manifest file will run where as if you are just browsing the internet or on another other page besides the extension page the background script will not run.
Here is what I mean:
In my Manifest file:
"background": {
"scripts": ["jquery-latest.js","background.js"]
},
Now in the background.js file:
$(document).ready(function(){
alert("working");
});
I use a simple alert function to see if this will work and found out that alert("working"); only gets displayed when I am on the chrome://extension directory. If I go to google.com or something of that sort, no cigar.
My question lies in, why does this happen? How do I change it so it does alert no matter what.
The background script should be viewed as "running in the background of the Chrome browser".
Your desired effect (running a script for every page) is actually a task for content scripts.
To learn more, read https://developer.chrome.com/extensions/overview.html#arch.
It is because you are using the background page .. use the event page instead by slightly modifying the manifest.json..
Try adding this:
"background": {
"scripts": ["jquery-latest.js","background.js"],
"persistent": false
},
for more details on event pages check this : https://developer.chrome.com/extensions/event_pages
The effect is produced because whenever you load chrome://extensions it forces the extensions to reload, the same behavior can be reproduced using CTRL+R. So every time, the background page got a fresh reload, which doesn't happen in case of other pages.
The background script is a script running in the background to handle majority of chrome events that content scripts cannot. Content scripts are purely the content of the each page. Both cannot speak to each other, however, you can give the scripts listeners (e.g. chrome.browserAction.addListener(myFunction) plays the function when the button in the top right of your screen for the extension is clicked) order to find out whether a button has been pressed or even send a message from the background script into the page's console.
https://youtu.be/ew9ut7ixIlI
This video was a great introduction for me about background scripts, however, the part where he begins to talk about the listeners and such is 6:30.
Related
I am developing a chrome extension right now. It serves its purpose but the problem is that the content script gets executed on its own whenever I open a new tab and visit a site. The problem is that there is an alert in the content script & it starts to become annoying when the alert gets triggered on visiting every new site.
Currently I am triggering the content script from my background script by using the chrome.tabs.executeScript API. However, I have noticed that whenever I open a new tab & visit a new site, the code in content script gets executed automatically even if the criteria for it getting triggered hasn't been met in the background script.
Is this the normal behavior? Is this how all chrome extensions are supposed to work? If yes, is there a way to prevent this? For now, I have declared my content script as a background script, but I would still like to find a fix for this.
Here is my manifest - manifest.json:
"content_scripts" : [
{
"matches" : [ "<all_urls>"],
"js": ["raisealert.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
Here is the background script - background.js:
if(condition met)
chrome.tabs.executeScript(null, {
code: 'var config = ' + JSON.stringify(config)
}, function() {
chrome.tabs.executeScript(null, {file: 'raisealert.js'}, function() {
console.log("Alarm triggered");
});
});
And here is the content script - raisealert.js
alert("sample alert raised");
You can have a content_script load automatically and with no programming effort on your part by calling it up in the content_scripts section of the manifest.
You can do this for all URLs or you can define fairly fine-grained url patterns that the script should load on. See Manifest injection
If you want to inject the script conditionally on criteria other than just the URL then you can use programmatic injection - this could be based on criteria such as the content of the page or whether someone clicks the browser action button or selects a right click context menu option you've defined.
Programmatic injection will often use the chrome.tabs.onupdated listener to check for particular urls or content and then inject or not.
If your extension is something that potentially anyone might want to use on any page then it's usually best to inject it based on a deliberate action by the user, e.g. in your case, as you say, it is annoying (understatement) to get an alert on every tab and page that loads.
Even if your script has no visible annoyances, having it load in every page automatically is rarely a good idea unless it has near zero impact on the page.
If it's designed to work on a specific site then injecting via the manifest with an appropriate url pattern filter is often best.
I am trying to develop a chrome extension which saves the url of webpages opened in all tabs and then load them whenever needed. Now I know content scripts, background scripts and popup.js. Content scripts mainly deal with the content of the loaded webpage and they have less chrome api interactions, background scripts are executed in an isolated environment and we can use all chrome api methods, popup.js is simply javascript that runs in context of popup.html.
Now here is my problem, I have a button in popup.html named "save" and on click of that button I want to save all the webpage urls opened in multiple tabs under one window. How can I do that?
Should I write a content or a background script?
Sorry for my noobish question. I am new to chrome api. Any help/suggestions?
Neither content script or background page is needed. You could do that just in popup.js, since popup page actually runs in the same context with extension.
In your popup.js, just call chrome.tabs.query to get tab info, including url (you would need to declare tabs permissions in manifest.json). If you want to specify window id, either use WINDOW_ID_CURRENT or retrieve it through other ways (depends on your logic)
chrome.tabs.query({ windowId: YOUR_WINDOW_ID }, (tabs) => {
tabs.forEach((tab) => console.log(tab.url));
});
I am working on a Firefox Extension, using the SDK. The addon will be changing the CSS on specific websites (by attaching a stylesheets in the head). They obviously need to be attached before the main content of the page loads.
I need to be able to listen for the URL of a tab changing, and attach a script, before the tab content has loaded. The script will wait until the <head> has loaded before attaching the stylesheets.
I tried using tabs.on('ready', function(tab) { tab.attach(...) } ), but this does not work, because it listens for the tab to be fully loaded, and then runs the code inside the function()
I also tried pageMod, but this does the same as the above. It attaches to the pages I need it to, but only after they are fully loaded.
Does anyone know how to detect for a tab URL change, before the page is ready?
Note: Please do not answer with a setInterval() method, I cannot state this enough!
I worked out how to do it, I had not read the pageMod documentation well enough.
You can specify when the script is attached, using contentScriptWhen: "when", where when can be start, ready or end (obviously I used start)
I have an extension which runs on a background page, the browserAction icon requires 2 clicks at max few seconds apart for the extension to start running background.js so I tried to see what's the issue, with chrome://extensions page loaded which states for my extension:Background page inactive. When I click one time the state changes to background page active and then the next click actually runs the extension, I couldn't see what's the issue, I use chrome.runtime.reload() at a couple of places, maybe that's the issue but what's the solution?
Thanks in advance
A background page can become inactive if it's declared as an Event page ( "persistent": false in the manifest).
Which probably means that you haven't set it up correctly if events are only handled after causing them twice.
Obvious solution: drop "persistent": false from the manifest. This is not recommended unless you use things that cannot work with Event pages (currently, mainly webRequest API)
Proper solution: see if your background script can be made into a proper Event page.
I'm trying to make an extension that will collect some data from currently opened tab on Google chrome.
I also use a popup in my extension to provide a control interface (buttons and stuff).
I need to be able to do the following:
1) Read source code of currently opened tab.
2) To be able to scroll down window content (using the code of course) .
If I could only get access to a javascript "window" object of currently opened tab , that would be enough.
But I'm open for another suggestions .
Can anyone help ?
You can simple use document in a content_script. Content scripts are defined in the manifest.json. In your case you should set "run_at": "document_end", so the dom is fully loaded when your script is called.
For more informations about content scripts and chrome extension development you find an easy to use guide from google - http://code.google.com/chrome/extensions/content_scripts.html
Code from popup won't be able to access directly to window objects from displayed tabs. You have to use a content script which will be able to send the source code of opened tab to the background page. This content script will also be able to scroll the window of opened tab.