1

I'm currently adding an onboarding page to a Chrome extension. On install, I pop up a new HTML page that's bundled with the extension, which gives them an intro to the product and asks them to try it:

background.js

chrome.runtime.onInstalled.addListener(function(details){
  if(details.reason == "install"){
    chrome.tabs.create({url: "/onboarding.html"});  
  };
});

The page then tells them to turn the extension on, by clicking its icon, which runs the following (currently working perfectly on normal web pages):

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  toggle = !toggle;
  if(toggle){
    chrome.browserAction.setIcon({path:{"16": "icons/icon16c.png", "32": "icons/icon32c.png"}});
    chrome.tabs.executeScript({file: "measure.js"});
    chrome.tabs.insertCSS({file: "styles.css"});
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      tabId = tabs[0].id;
      chrome.tabs.sendMessage(tabId, {"whatToDo": "on"});
      console.log("Measure is on tab number: " + tabId);
    });
  }
  else{
    chrome.browserAction.setIcon({path:{"16": "icons/icon16.png", "32": "icons/icon32.png"}});
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {"whatToDo": "off"});
    });
    tabId = "";
  }
});

Ideally, the scripts it injects in there perform the extension's function on the onboarding page's html content. The user is now familiar with the extension and can carry on with their life.

But, I get two errors from this instead in my background page's console:

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of the page. Extension manifest must request permission to access the respective host.
    at chrome-extension://ebaijgpdnadcfcdmcjcpgcgfmddlhfkm/background.js:13:17

and

Unchecked runtime.lastError while running tabs.insertCSS: Cannot access contents of the page. Extension manifest must request permission to access the respective host.
    at chrome-extension://ebaijgpdnadcfcdmcjcpgcgfmddlhfkm/background.js:14:17

So I've worked out that I'm getting this problem because I'm being naughty and trying to inject scripts into a chrome-extension:// page. Which feels weird to me, because it's a page I'm creating myself?

I've had a look around at others with the same/similar problems, but I'm hoping that because I'm creating this page and not asking to access core Chrome pages, there might be a better solution?

I don't want to have to ask the user for some serious permissions on install, because I'm only using activeTab at the moment. I'd also prefer not to have to point them to a live web page hosted somewhere, packaging the onboarding up with the extension feels a lot more graceful to me.

Does anyone have any suggestions for how I could still accomplish what I want, but approach it differently?

Thanks!

Update This possible duplicate was raised: Chrome extension: create tab then inject content script into it.

It addresses the problems I have, but not in the most ideal manner.

Preferred answer My preferred answer here is wOxxOm's comment, which tells me to approach this different. Instead of injecting the scripts into the page, I should just be linking to them in the traditional way from the HTML of the page.

This has fixed my problem.

Community
  • 1
  • 1
Rowan
  • 485
  • 3
  • 5
  • 13
  • 1
    Is [this question/answer](https://stackoverflow.com/q/21009637) similar enough to answer yours? – Siguza Feb 26 '17 at 22:14
  • @Siguza Looks promising. Going to play with relaying messages around to get what I need. – Rowan Feb 26 '17 at 23:00
  • 2
    Possible duplicate of [Chrome extension: create tab then inject content script into it](http://stackoverflow.com/questions/21009637/chrome-extension-create-tab-then-inject-content-script-into-it) – Makyen Feb 27 '17 at 03:16
  • 2
    You're doing it backwards. There's no need to inject anything. Simply reference the code in a script tag and link tag for the stylesheet in HTML of the page using relative paths. – wOxxOm Feb 27 '17 at 06:16
  • 2
    You can't use `tabs.executeScript()` to inject scripts into a `chrome-extension://` URL. If your issue is that you don't want the code running in that tab until instructed by the background script, you can use the background script to insert ` – Makyen Mar 01 '17 at 09:54
  • Thanks @Makyen. That would also solve my issue. – Rowan Mar 01 '17 at 14:26
  • @Makyen I've just come back to this, and am trying to use the background script to insert script tags into the tab's page. But they're only being added to the background page's HTML. My searching didn't find any articles/posts showing me how to do this properly, do you know of any? – Rowan Mar 10 '17 at 17:50
  • 1
    I don't recall an available exact example. I've done similar things for changing the DOM of a extension page popup/tab from the background page, but don't recall if I posed such as an answer. In the background script, you need to obtain a reference to the `window` for the extension page HTML that is displayed in a tab. You can do this through [`extension.getViews()`](https://developer.chrome.com/extensions/extension#method-getViews). I probably have a better example around, but I use that to replace/override `chrome.tabs.query` in [this answer](http://stackoverflow.com/a/40296092/3773011). – Makyen Mar 10 '17 at 18:18

0 Answers0