从以编程方式注入的 Chrome 扩展程序中的弹出窗口链接到选项页面

Question

我制作了一个以编程方式注入的 Chrome 扩展程序版本，以便让该扩展程序在来自具有不同顶级域名的主机的页面上工作（cfr 上一篇文章）。 现在我想在弹出菜单中添加一个选项页面的链接。 但是我不断收到以下错误消息：

未经检查的 runtime.lastError：无法访问 url“chrome-extension://•••••••••••••••/options.html”的内容。 扩展清单必须请求访问此主机的权限。

谁能告诉我如何申请这样的许可？ 在background.js中，我也尝试过chrome.tabs.create({url: "options.html"}); 没有成功。

请注意，选项页面显示正常，但错误消息不断出现。

manifest.json：

{
  "manifest_version": 2, 
  "name": "My Extension",
  "version": "0.5",
  "description": "Does what it does",
  "icons": {"32": "icon32.png",
           "48": "icon48.png",
           "128": "icon128.png"
           },
   "options_page": "options.html",         
  "background": {
              "scripts": ["background.js"],
              "persistent": false
            },
    "browser_action":{
    "default_popup": "popup.html"
  },                   
 "optional_permissions":["tabs","https://*/*"],
 "permissions": ["storage"]      
}

弹出。html：

<html>
<head>
</head>
<body>
<ul>
<li id="li_1">Enable My Extension</li>
<li id="li_2">Options</li>
</ul>
<script src="jQuery.js"></script>
<script src="popup.js"></script>
</body>
</html>

popup.js：

jQuery(function($){
  var tabId = 0;
  $(document).ready(function(){
    $("#li_1").click(function(){ // this works
       window.close();
         chrome.permissions.request({
           permissions: ['tabs'],
           origins: ["https://*/*"]
        }, function(granted) {
          if (granted) {
            chrome.runtime.sendMessage("granted");
          } else {
            alert("denied");
          }
       });
    });
    $("#li_2").click(function(){ // this sends request to background.js which then causes error
      window.close();
      chrome.runtime.sendMessage("openOptions");
    });
  });
});

背景.js：

chrome.runtime.onMessage.addListener(
  function(message) {
    switch(message){
      case "granted": //this works, please ignore
              var tabId = 0;
              chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                tabId = tabs[0].id;
                injectScript(tabId);
                chrome.permissions.contains({origins:["https://*/*"]}, function(perm) {
                if (perm) { 
                  chrome.tabs.onUpdated.addListener(function(tabId){
                     injectScript(tabId);
                  });
                }
               });
             });
            
      break;
      case "openOptions": //this does not work – generates error msg
       chrome.runtime.openOptionsPage();
      break;
    }
  return true;
});

Answer 1

正如wOxxOm在上面的评论中所建议的那样，该错误是由扩展程序尝试将内容脚本注入options.html页面引起的。 避免这种情况的一种方法是将条件插入到background.js中的injectScript() function （问题中未显示）中，确保仅注入 web 页面。 工作版本如下所示。

背景.js

function injectScript(tab){
 chrome.tabs.get(tab,function(thisTab){ // get tab info
    if(thisTab.url.startsWith("http")){  // condition: is this a web page?
      chrome.tabs.executeScript(tab,{ // if so, inject scripts
           file: "jQuery.js"
       }); 
      chrome.tabs.executeScript(tab,{
           file: "content.js"
      });
    }
  });   
}

chrome.runtime.onMessage.addListener(
  function(message) {
    switch(message){
      case "granted":
              var tabId = 0;
              chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                tabId = tabs[0].id;
                injectScript(tabId);
                chrome.permissions.contains({origins:["https://*/*"]}, function(perm) {
                if (perm) { 
                  chrome.tabs.onUpdated.addListener(function(tabId){
                     injectScript(tabId);
                  });
                }
               });
             });
      break;
      case "openOptions":
       chrome.runtime.openOptionsPage();
      break;
    }
  return true;
});

从以编程方式注入的 Chrome 扩展程序中的弹出窗口链接到选项页面

问题描述

1 个解决方案

解决方案1
0 2020-12-18 15:53:07

从以编程方式注入的 Chrome 扩展程序中的弹出窗口链接到选项页面

问题描述

1 个解决方案

解决方案1 0 2020-12-18 15:53:07

解决方案1
0 2020-12-18 15:53:07