Javascript 铬合金延长线–；将脚本注入chrome扩展名：//页面的变通方法？

我目前正在向Chrome扩展添加一个入职页面。在安装时，我弹出一个与扩展捆绑在一起的新HTML页面，向他们介绍产品，并请他们试用：

background.js

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

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 = "";
  }
});

然后，该页面通过单击其图标告诉他们打开扩展，该图标运行以下功能（目前在普通网页上运行良好）：

background.js

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

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 = "";
  }
});

理想情况下，它在其中注入的脚本会对入职页面的html内容执行扩展功能。用户现在已经熟悉了扩展，可以继续他们的生活

但是，在我的后台页面的控制台中，我发现了两个错误：

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

及

---

所以我发现我遇到了这个问题，因为我很淘气，试图将脚本注入

chrome扩展：//

页面。这对我来说很奇怪，因为这是我自己创建的页面

我已经环顾了其他有相同/类似问题的人，但我希望，因为我正在创建这个页面，而不是要求访问核心Chrome页面，可能会有更好的解决方案

我不想在安装时向用户要求一些严格的权限，因为我现在只使用

activeTab

。我也不想让他们指向某个地方托管的实时网页，用扩展包打包登载对我来说感觉更优雅

有没有人对我如何仍然可以实现我想要的，但方法不同有什么建议

谢谢

---

更新 引发了此可能的重复项：

它解决了我的问题，但不是以最理想的方式

首选答案 我的首选答案是wOxxOm的评论，它告诉我要用不同的方法来处理这个问题。我不应该将脚本注入页面，而应该以传统的方式从页面的HTML链接到它们

---

这解决了我的问题。

是否足够类似于回答你的问题？可能是重复的，你正在反向操作。没有必要注射任何东西。只需使用相对路径引用页面HTML中样式表的脚本标记和链接标记中的代码。不能使用

tabs.executeScript（）

将脚本插入

chrome扩展名：//

URL。如果您的问题是在后台脚本指示之前不希望代码在该选项卡中运行，则可以使用后台脚本将引用相应脚本的

标记插入该选项卡的页面中。因为它是从扩展中打开的

chrome扩展名：//

URL，所以它在扩展名的后台上下文中运行。这意味着后台脚本可以直接访问该选项卡的DOM，以插入

标记，或者您需要的任何其他内容。我也做过类似的事情，从背景页面更改扩展页面弹出/选项卡的DOM，但我不记得我是否提出了答案之类的问题。在后台脚本中，需要获取对选项卡中显示的扩展页面HTML的

窗口的引用。你可以通过。我可能有一个更好的例子，但我用它来替换/覆盖中的
chrome.tabs.query
in.是否足够类似于回答您的问题？可能重复您的操作是反向的。没有必要注射任何东西。只需使用相对路径引用页面HTML中样式表的脚本标记和链接标记中的代码。不能使用
tabs.executeScript（）
将脚本插入
chrome扩展名：//
URL。如果您的问题是在后台脚本指示之前不希望代码在该选项卡中运行，则可以使用后台脚本将引用相应脚本的
标记插入该选项卡的页面中。因为它是从扩展中打开的
chrome扩展名：//
URL，所以它在扩展名的后台上下文中运行。这意味着后台脚本可以直接访问该选项卡的DOM，以插入
标记，或者您需要的任何其他内容。我也做过类似的事情，从背景页面更改扩展页面弹出/选项卡的DOM，但我不记得我是否提出了答案之类的问题。在后台脚本中，需要获取对选项卡中显示的扩展页面HTML的
窗口的引用。你可以通过。我可能有一个更好的例子，但我用它来替换/覆盖中的
chrome.tabs.query
。