Chrome extension - get tab url from background page without popup

Question

I would like to get the current URL of the tab on which the user is enabled, without forcing the user to click on the popup button. I got a script to work when the user clicks on the popup window icon and everything works as expected, but in order to try to fulfill my current goal (to do this without clicking a button), I copied and pasted the code to the original page and didn’t receive any results. I assumed that I needed some kind of active listener or something like that.

This is the javascript that I got to work with a popup button

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <script> window.addEventListener("load", windowLoaded, false); function windowLoaded() { chrome.tabs.getSelected(null, function(tab) { //doing stuff with the url }); } </script> 

Answer 1

According to the docs for packaged applications, which may or may not be the same for extensions, you use the onLaunched event from the chrome.app API to run code when the application starts:

 // start doing something when the app first loads.... chrome.app.runtime.onLaunched.addListener(function() { // all your monitoring code will go here }); 

Please note: if you are creating an extension and your extensions should start listening as soon as the browser loads, you may not need to declare the listener "onLaunched".

In addition, you will need to keep track of changes in the active tab, assuming that you always need to know the URL that the user is enabled on the current active tab. The Chrome Tabs API contains a lot of information that will help you work with tabs from the extension, for example, here is the code for monitoring changes to the active tab:

 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { console.info("This is the url of the tab = " + changeInfo.url); // do stuff with that url here.... }); 

If the user changes the URL on the active tab, this handler will track this change:

 chrome.tabs.onActivated.addListener(function(activeInfo) { .. } 

However, the documentation for onActivated states the following:

It starts when the tab in the window is active. Note that the bookmark URL cannot be set when this event fires, but you can listen for onUpdated events that will be notified when the URL is set.

Thus, you will most likely use the onUpdated example.

When you hit a point on the background page where you are faced with the page into which you want to enter JavaScript. For example, to change the background color of a page using JavaScript, you use the following code:

 chrome.tabs.executeScript(null, {code:"document.body.bgColor='red'"}); 

Remember that your background page cannot directly run JavaScript or control the DOM of a web page; that way, you will need to enter the code in a way that includes injections of things like jQuery and other resources that you will need.

Remember to enable tab permissions and the background page in your manifest. json:

 /* in manifest.json */ "permissions": [ "tabs", "http://*/*" ], "background": { "scripts": ["background.js"] }, 

To inject jQuery into a page, you basically write the code that creates the script element, and then you enter it into the page:

 chrome.tabs.executeScript(null, {code: "var script = document.createElement('script');" + "script.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');" + "script.setAttribute('type','text/javascript');" + "document.getElementsByTagName('head')[0].appendChild(script);" } ); 

Double-quoted code does not run on your background page. Instead, it starts when you enter a tab page. I use single quotes for content inside double quotes, so the parser is not confused and throws string literals.

Please note that there may be a better, cleaner way to inject such code into a page, but for small, small injections, this is enough.

Keep in mind that if jQuery is already entered on the page, you may run into conflicts.

Answer 2

another approach: get it from the contents of the script and send it to the original page:

 url = window.location.href; chrome.runtime.sendMessage({greeting: url}, function(response) { }); 

in background.js

 chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){ var url=message.greeting; } 

Answer 3

In your Chrome extension, you will most likely need a background file. Check out this developer article on creating a page called background.js

This will allow you to place code in your file, which is preserved while the extension is on.