CODEWITHSUNDEEP
firefoxfirefox-addonfirefox-addon-webextensions
user6875880
user6875880

Reputation: 681

How to attach content script to a tab in webextensions

First of all, I thank you for your help and support.

If I want to attach a content script to a tab that I do not have its id. The tab is opened when the extension's button is clicked as in the following. 

function openIndexPage() {
   browser.tabs.create({
     "url": "data/index-page.html"
   });
} //end openIndexPage

browser.browserAction.onClicked.addListener(openIndexPage);

How can I attach content script to the index-page.html? I can not use the normal HTML <script></script> to attach it as it needs to access the storage. Can you help me solve this dilemma please?

Upvotes: 0

Views: 470

Answers (1)

Makyen
Makyen

Reputation: 33366

You can't inject content scripts into HTML pages from your extension and there's no need to do so.

HTML pages which are loaded from within your extension, be that as a tab, window, options page, popup, etc., are loaded into the background context. This is the same context in which your background script(s) run. However, scripts associated with such HTML pages (i.e. in separate JavaScript files referenced from <script> tags) run in the scope of that page. They have access to all the chrome.*/browser.* APIs which are available to your background script(s). If they so desire, they can gain references to the other scopes within the background context. If you want more information about communicating between such scripts, please see: Communicate between scripts in the background context (background script, browser action, page action, options page, etc.)

Thus, there is no need to load a content script into such pages. The scripts running in the page already have access to the DOM of that page and all the privileged extension APIs. Such scripts are not restricted to only the APIs available to content scripts.

Side note: Content scripts are attached to the tab's content, not the tab

Content scripts are not attached to a tab, per se. They are injected into the content that is currently displayed in a tab. This happens either through a manifest.json content_scripts entry having a matching URL, or through tabs.executeScript() being called to inject it into a specified tab. If different content is loaded into the tab, then the content script is destroyed. Thus, it's attached to the content, not the actual tab. In other words, it does not get automatically reloaded when the tab changes to a new URL, unless that URL matches a manifest.json content_scripts entry or tabs.executeScript() is called again.

Upvotes: 1

Related Questions