How to execute my content script on a newly opened chrome tab?

Question

I am calling a Chrome extension from a web portal to open a URL in a new tab, and on the newly opened tab I want to perform executeScript:

manifest.json

"externally_connectable": {
  "matches": ["http://localhost:3000/*"]
},
"permissions": ["tabs", "http://*/*", "https://*/*"]

background.js

// listen to webportal
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    a = chrome.tabs.create({ url: request.openUrlInEditor });
    chrome.tabs.insertCSS(a.id, { file: "combined.css" });
    chrome.tabs.executeScript(a.id, { file: "combined.js" });
  }
);

If I try to perform insertCSS and executeScript on extension click, it works fine

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.insertCSS(tab.id, { file: "combined.css" });
  chrome.tabs.executeScript(tab.id, { file: "combined.js" });
});

What are your permissions? I mean right now the structure is simply wrong, with `permissions` being a subkey of `externally_connectable`. — Xan, Jul 07 '16 at 08:33
Note that you don't need the `tabs` permission for what you're doing (it's only needed to read URLs/titles of existing tabs) — Xan, Jul 07 '16 at 09:21
the extension is performing someother functionalities also, tabs permission have been added for those — shubhangi singh, Jul 07 '16 at 09:32

score 1 · Answer 1 · answered Jul 06 '16 at 09:02

1

chrome.tabs.create doesn't return anything.

To make use of the created tab, you could wrap your method inside its callback, which has the created tab as a parameter:

chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
    chrome.tabs.create({ url: request.openUrlInEditor }, function(tab) {
        chrome.tabs.insertCSS(tab.id, { file: "combined.css" });
        chrome.tabs.executeScript(tab.id, { file: "combined.js" });
    });
));

answered Jul 06 '16 at 09:02

Haibara Ai

10,703
2
31
47

@shubhangisingh, could you please make sure `onMessageExternal.addListener` is called? – Haibara Ai Jul 06 '16 at 09:42
yes its being called `chrome.runtime.onMessageExternal.addListener( function(request, sender, sendResponse) { chrome.tabs.create({ url: request.openUrlInEditor }); chrome.browserAction.setBadgeText ( { text: "Click" } ); setTimeout(function () { chrome.browserAction.setBadgeText( { text: "" } ); }, 5000); } );` this is working for me – shubhangi singh Jul 06 '16 at 13:11
@shubhangisingh, I guess you haven't declared corresponding `permissions` in `manifest.json`, could you please also provide `permissions` field in your `manifest.json`? – Haibara Ai Jul 07 '16 at 00:09
i have edited to question to inculde the permissions section in my mainfest – shubhangi singh Jul 07 '16 at 01:35
If `executeScript` fails for some reason, it will raise an exception. Do open the background console to check for that. – Xan Jul 07 '16 at 09:25

score 1 · Accepted Answer · answered Jul 08 '16 at 18:00

i solved my problem myself worked after giving active tabs permission to my extension manifest.json

    "permissions": ["tabs", "http://*/*", "https://*/*","activeTab"]

backround.js

// listen to webportal
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    chrome.tabs.create({ url: request.openUrl },function(tab) {
        chrome.tabs.insertCSS(tab.id, { file: "combined.css" });
        chrome.tabs.executeScript(tab.id, { file: "combined.js" });
    });
  }
);

score 0 · Answer 3 · answered Mar 09 '20 at 07:37

Content.js

chrome.browserAction.onClicked.addListener(buttonClicked)
function buttonClicked(tab) {
   console.log("button clicked", tab)
   chrome.tabs.create({ url: LinkOfNewTab }, function(tab2) {
   console.log(tab2)
   extensionButtonClicked = true
})

}

Background.js

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
if (extensionButtonClicked) {
    if (tab.url === Link1) {
        chrome.tabs.executeScript(tab.id, {file: "content.js"} );
    }

    if (tab.url === Link2) {
        chrome.tabs.executeScript(tab.id, {file: "content2.js"} );
    }
}

});

Description

'chrome.browserAction.onClicked' event will listen for icon when you click and 'chrome.tabs.create' will open up a new code and 'chrome.tabs.onUpdated' will fire every time when page reload or new tab is opened.

How to execute my content script on a newly opened chrome tab?

3 Answers3

Linked