從以編程方式注入的 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