Chrome扩展程序：如何在新标签页中打开链接？

Question

Chrome扩展程序：如何在新标签页中打开链接？

javascripthtmlgoogle-chromegoogle-chrome-extensiontabs

101

在我的Stackoverflow文件夹中，我有一个stackoverflow.ico文件和另外两个文件。将其导入Chrome后，地址栏中会显示图标，但是当我点击它时，Chrome不会打开任何新的选项卡。我做错了什么？ manifest.json

{
  "name": "Stackoverflow",
  "version": "1",
  "browser_action":
  {
    "default_icon": "stackoverflow.ico"
  },
  "background":
  {
    "page": "index.html"
  },
  "permissions": ["tabs"],
  "manifest_version": 2
}

index.html

<html>
  <head>
    <script>
      chrome.browserAction.onClicked.addListener(function(activeTab)
      {
        var newURL = "http://stackoverflow.com/";
        chrome.tabs.create({ url: newURL });
      });
    </script>
  </head>
</html>

- Thanh Nguyen

4个回答

35

在我的情况下，当我点击扩展弹出窗口内的链接时，我需要在新标签页中打开链接。只需将 target 属性设置为 _blank 即可实现该功能。

<a href="http://www.example.com" target="_blank">Example</a>

- ego

6

好的，这将在浏览器中打开一个新标签页，但会关闭弹出窗口（这并不总是想要的）。 - fvrab

7

我更喜欢更简单的解决方案-只需将操作添加到onclick中。

$('body').on('click', 'a[target="_blank"]', function(e){
    e.preventDefault();
    chrome.tabs.create({url: $(this).prop('href'), active: false});
    return false;
});

这将打开所有具有target="_blank"属性的链接（甚至是动态创建的链接），在新标签页中打开而不丢失弹出窗口焦点。

- fvrab

你在哪里调用这个函数？我的意思是它是写在 content.js 还是 background.js 中？ - gumuruh

it's written in content.js - fvrab

4

您不需要使用jQuery，只需使用window.open("http://example.com", "_blank")。

- Jaxon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BeardFist · Accepted Answer

问题在于您正在违反清单版本2的内容安全策略。要解决此问题，您只需摆脱内联脚本，例如您的背景页面。将其转换为后台脚本，如下所示：

manifest.json

"background":{
  "scripts": ["background.js"]
},

background.js

chrome.browserAction.onClicked.addListener(function(activeTab){
  var newURL = "http://stackoverflow.com/";
  chrome.tabs.create({ url: newURL });
});

如果由于某些原因你确实需要它成为一个页面，那么只需将脚本作为外部文件包含，并像以前一样声明它为一个页面即可。