如何从内容脚本调用 chrome.tabs.create API？答案

【问题标题】：How to call chrome.tabs.create API from content script?如何从内容脚本调用 chrome.tabs.create API？
【发布时间】：2015-09-01 11:32:58
【问题描述】：

我正在开发一个 chrome 扩展，我想在网页上注入一个按钮。单击按钮时，我想调用 chrome.tabs.create API 以在新选项卡中打开 HTML 页面。

我们知道我们不能直接使用内容脚本打开标签，那么实现上述功能的解决方案是什么。

假设我在按钮上注入了一个元素名称“按钮”，我使用以下代码添加了 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://*/*"]
  }]
}

【问题讨论】：

为什么不向后台脚本发送消息并让它打开新标签页？
你能详细说明如何做到这一点吗？我已经相应地编辑了问题。
你为什么不直接使用链接？

标签： javascript jquery google-chrome google-chrome-extension

【解决方案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。此外，我们通常有一个用于消息的有效负载结构，包含消息类型（字符串）和其他参数。

【讨论】：

在你的 background.js 例子中关闭"newTab"