Question

我正在编写我的第一个Chrome扩展程序，它是一些指向打开网址的链接。一个通过JavaScript打开一个站点，另一个是硬编码链接。都没有工作。不知道我在这里做错了什么。

的manifest.json

{
  "manifest_version": 2,

  "web_accessible_resources": [
    "popup.html", "popup.js"
  ],

  "name": "Open URL",
  "description": "Opens a URL.",
  "version": "1.0.0",

  "permissions": ["tabs"],

  "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html",
      "default_title": "Open a URL"
  }
}

popup.html

<!DOCTYPE html>
<html>

<head>
    <title>Open URL</title>
    <script src="popup.js"></script>
</head>

<body style="width: 100px;">
    <p>Open URL</p>
    <p><a href="javascript:OpenURL('http://www.google.com')">Google</a></p>
    <p><a href="http://www.stackoverflow.com">Stack Overflow</a></p>
</body>

</html>

popup.js

function OpenURL(location) {
    chrome.tabs.create({ url: location });
}

Answer 1

让我解释一下：

TYPE 1：Plain Anchor Link

解决方案：请为其添加目标属性（＆＃34; _blank＆＃34;），以便在新弹出窗口中打开网址。试试以下内容：

<a href="http://www.stackoverflow.com" target="_blank">Stack Overflow</a>

TYPE 2：使用Javascript函数处理程序的锚点链接

问题：扩展中禁止内联脚本执行。因此，您需要明确处理它并打开URL的弹出窗口。请尝试以下步骤：

步骤1：将#id添加到该锚链接

<p><a href="http://www.google.com" id="linkId123">Google</a></p>

步骤2：处理具有id的锚链接并调用函数popupWindow（）。将它们放在您的内容脚本中。

$(function() {
    $('#linkId123').click(function() {
        popupWindow($(this).attr('href'), 'Title',"800px","600px");
    });
});

function popupWindow(url, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    var top = (screen.height / 2) - (h / 2);
    var win = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    win.focus();
}

我测试了这两个解决方案并且工作正常。希望它有所帮助！

在Chrome扩展程序中打开一个网址

1 个答案: