Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome extension code vs Content scripts vs Injected scripts

I am trying to get my Chrome Extension to run the function init() whenever a new page is loaded, but I am having trouble trying to understand how to do this. From what I understand, I need to do the following in background.html:

  1. Use chrome.tabs.onUpdated.addListener() to check when the page is changed
  2. Use chrome.tabs.executeScript to run a script.

This is the code I have:

//background.html chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {     chrome.tabs.executeScript(null, {code:"init();"}); });  //script.js function init() {     alert("It works!"); } 

I am also wondering if the init() function will have access to my other functions located in other JS files?

like image 835
Jon Avatar asked Mar 28 '12 20:03

Jon


People also ask

What is Chrome extension inject JS?

JS Inject. Create, save, and inject javascript code into web pages. This extension allows you to write, save, and execute javascript into web pages. You can save scripts to be run globally (on any page), on a specific domain, on a specific page, or via a "URL contains" string.

What is a Chrome Extension?

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

What is a chrome script?

Chrome Scripting is a new namespace added in Manifest V3. It replaces the Tab API methods of Manifest V2 and can inject scripts and styles into websites. For example, chrome. tabs. executeScript and chrome.


1 Answers

JavaScript code in Chrome extensions can be divided in the following groups:

  • Extension code - Full access to all permitted chrome.* APIs.
    This includes the background page, and all pages which have direct access to it via chrome.extension.getBackgroundPage(), such as the browser pop-ups.

  • Content scripts (via the manifest file or chrome.tabs.executeScript) - Partial access to some of the chrome APIs, full access to the page's DOM (not to any of the window objects, including frames).
    Content scripts run in a scope between the extension and the page. The global window object of a Content script is distinct from the page/extension's global namespace.

  • Injected scripts (via this method in a Content script) - Full access to all properties in the page. No access to any of the chrome.* APIs.
    Injected scripts behave as if they were included by the page itself, and are not connected to the extension in any way. See this post to learn more information on the various injection methods.

To send a message from the injected script to the content script, events have to be used. See this answer for an example. Note: Message transported within an extension from one context to another are automatically (JSON)-serialised and parsed.


In your case, the code in the background page (chrome.tabs.onUpdated) is likely called before the content script script.js is evaluated. So, you'll get a ReferenceError, because init is not .

Also, when you use chrome.tabs.onUpdated, make sure that you test whether the page is fully loaded, because the event fires twice: Before load, and on finish:

//background.html chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {     if (changeInfo.status == 'complete') {         // Execute some script when the page is fully (DOM) ready         chrome.tabs.executeScript(null, {code:"init();"});     } }); 
like image 198
Rob W Avatar answered Sep 22 '22 13:09

Rob W