如何从 chrome 扩展弹出窗口打开一个新标签答案

【问题标题】：How to open a new tab from chrome extension popup如何从 chrome 扩展弹出窗口打开一个新标签
【发布时间】：2012-10-31 10:07:17
【问题描述】：

我是 chrome 扩展的新手。我已经尝试了创建扩展的第一个示例练习。现在我正在尝试从扩展弹出窗口的新选项卡中打开一个 URL。只是我在 popup.html 页面中添加了一个 HTML 锚标记。

a href="www.google.com">Click</a>

但它没有打开。它正在尝试在弹出窗口中打开带有以下 url 的 URL。

chrome-extension://ljamgfaclheagbikmcagffcbdbcoodna/www.google.com

我的 popup.html 有这个代码。

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
    </style>
    <!-- JavaScript and HTML must be in separate files for security. -->
     </head>
  <body>
  <b>Karthick</b>
  <a href="www.google.com">Click</a>
  </body>
</html>

而我的 Manifest.json 有以下 JSON

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension for my test",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

我没有在 popup.js 中写任何东西我搜索了它是怎么做的。但是他们说我必须使用以下内容。

chrome.tabs.getSelected({}, function(tab) {
  chrome.tabs.update(tab.id, {url: 'http://google.com'});
});

但我不知道正确的方法/在哪里做。请告诉我执行此操作的步骤。提前致谢。

【问题讨论】：

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

【解决方案1】：

这里是解决方案，只需在popup.js中添加以下代码：

$(function() {
  $('#s').click(function() {
     chrome.tabs.create({url: 'http://www.google.com'});
  });
});

document.addEventListener('DOMContentLoaded');

并更新您的锚标记，使其看起来像这样：

<a id="s" href="www.google.com">Click</a>

因为我们使用的是 jquery 选择器，所以将你的 popup.html 更新为：

<!doctype html>
<html>
  <head>
    <style>
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
  <b>Karthick</b>
  <a href="www.google.com">Click</a>
  </body>
</html>

并允许 popup.html 中的 jquery 更新您的清单，使其看起来像：

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension for my test",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ],  //<<--- do not miss this ","
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

如果这不起作用，让我把这个的 crx 发给你。干杯！

【讨论】：

我会检查并通知您

【解决方案2】：

Easy.把这个放到popup.html中：

<a href='google.com' target='_newtab'>Click</a>

或者把这个放到JS文件里：

window.open('http://google.com','_newtab');

【讨论】：

您也可以尝试使用“_blank”而不是“_newtab”。
或 jQuery。 It's really great and does all things.

【解决方案3】：

您可以为链接添加一个 onclick-listener。

var link = document.getElementById("link");
link.addEventListener("click", function(){
  chrome.tabs.getSelected({}, function(tab) {
    chrome.tabs.update(tab.id, {url: 'http://google.com'});
  });
}, false);

不过我会使用chrome.tabs.create() 函数。

【讨论】：

它不起作用...任何与权限相关的事情...任何我想包含但我错过的东西...
您是否在 JavaScript 代码中为匹配的元素添加了 class 或 id 标记？例如<a id='link'>Open</a>