在開發chrome擴展時，如何打開空白頁面來運行腳本？

Question

我正在創建一個chrome擴展，需要打開一個空白頁然后根據一些注入的腳本在這個空白窗口中打開1/2 iframe。

我的問題是如何打開一個我可以注入並運行JS的空白窗口？

我嘗試打開一個頁面，其網址為about:blank但由於以下錯誤，我無法將腳本注入此頁面：

chrome.tabs.create({
    url: 'about:blank'
}, function(tab) {
    chrome.tabs.executeScript(null, {
        file: 'jquery/jquery.js'
    }, function() {
        console.log('done', arguments);
    });
});

tabs.executeScript: Cannot access contents of url "about:blank".
Extension manifest must request permission to access this host.

顯然這個錯誤消息讓我覺得我沒有權限訪問這個URL並更新我的清單以允許訪問所有網址，但我有同樣的問題。

"permissions": [
    "tabs",
    "*://*/*"
],

---

額外信息

我沒有直接打開網址的原因是因為我有2個網址，我需要一個接一個地訪問。 這些文件是我需要查看結果的升級腳本。

執行此操作的最佳方法是打開一個頁面，並在窗口的左側和右側有一個iframe，我可以使用我的注入腳本控制它。

Answer 1

您可以在擴展程序包中創建虛擬升級頁面，我們稱之為upgrade.html

用它來制作你的結構並添加你想要的2個iframe。 如果要控制它，可以使用后台腳本使用消息傳遞在2個javascript頁面之間進行通信。 要從父頁面到iframe進行通信，只需查看從父頁面調用iframe中的JavaScript代碼中的任何答案

如果你不知道你想要預先運行的邏輯 - 盡管你應該 - 那么你可以在頁面之間傳遞整個字符串並在另一方面評估它們 - 雖然這不是你通常想做的事情。 以下是消息傳遞的文檔： http ： //developer.chrome.com/extensions/messaging.html

---

簡而言之：您的頁面A包含您的內容，第B頁是您的背景頁面，頁面C是包含2個iframe的更新頁面，然后：

// A.js
var port = chrome.runtime.connect({name: "content-script"});
port.postMessage({ runScript: 'yahoo(); function yahoo; () { alert("Yahoo!"); }' });

// B.js
// The background page is only used as a proxy
var upgrade_port = null;
chrome.runtime.onConnect.addListener(function(port) {
  switch (port.name) {
    case 'content-script':
       // Also you need to query for the upgrade page and open it if it does not exist
       port.onMessage.addListener(function(msg) {
         upgrade_port.sendMessage(msg);
       });
       break;
    case 'upgrade-page':
      upgrade_port = port;
      break;
    default:
      console.warn('Unknown port name: ' + port.name);
  }
});

// C.js
var port = chrome.runtime.connect({name: "upgrade-page"});
port.onMessage.addListener(function (message) {
  if (message.runScript) {
    eval(message.runScript);
  }
});

---

您需要使用端口，否則您無法從一個頁面與另一個頁面進行通信。 此外，如果您只是事先在頁面C中插入JS並將其保持為靜態並且只是將參數傳遞給函數RPC-style（遠程過程調用），也就是：

// A.js
port.postMessage({action:'RPC', name:'yahoo', args:['hello', 'world', 3]});

// C.js
var RPCs = {
  yahoo: function (str1, str2, no) {
    alert(str1 + ',\n' + str2 + '\nThis is a number: ' + no);
  }
};

port.onMessage.addListener(function (msg) {
  switch (msg.action) {
    case 'RPC':
      if (!RPC[msg.name]) { console.warn('Unknown RPC: ' + msg.name); return; }
      RPC[msg.name].apply(RPC, msg.args || []);
      break;
    default:
      console.warn('Unknown action: ' + msg.action);
  }
});