如何從內容腳本調用chrome.tabs.create API？

Question

我正在開發一個chrome擴展程序，該程序中我想在網頁上注入一個按鈕。 點擊該按鈕后，我要調用chrome.tabs.create API，以將HTML頁面打開到新標簽頁中。

眾所周知，我們無法使用內容腳本直接打開選項卡，那么實現上述功能的解決方案是什么。

可以說我在按鈕上注入了元素名稱“ button”，我使用以下代碼添加了evnetHandler，但是如何使用此功能在background.js中創建新標簽

button.addEventListener('click',clickhandeler,true);

manifest.json文件：-

{
  "name": "my chrome extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "open the tab when button is cllicked",

  "permissions":["activeTab","tabs"],
    "background": {
    "scripts": ["event.js"],
    "persistent": false
},

  "browser_action": {
    "name": "Manipulate DOM",


    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery.min.js", "inject.js" ],
    "css": [ "inject.css" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}

Answer 1

注釋后：為什么不將消息發送到后台腳本並打開新選項卡？

在頁面腳本中：

$('button').click(function(){
     chrome.runtime.sendMessage("newtab");
});

在您的background.js中

chrome.runtime.onMessage.addListener(function(message){
  if (message == "newTab){
     var url = "http://google.com/";
     chrome.tabs.create({ url: url });
  }
});

注意：這是此答案的非常簡單的示例，因為您沒有顯示HTML。 button將只匹配任何按鈕，因此您需要更新該選擇器以匹配您的HTML。 同樣，我們通常有一個用於消息的有效負載結構，其中包含消息類型（字符串）和其他參數。