0

这是我的第一个 chrome 扩展。

我基本上已经编写了一个带有 javascript 文件的 html 文件。我注意到显然您必须将 javascript 作为单独的文件放入 html 文件中。没关系。做过某事。在 html 标头中引用了它。

但我不确定如何设置清单文件以便能够在我的弹出 html 页面上使用 javascript。

javascript 不使用 jquery。它是纯 JavaScript。

我不确定清单中必须包含哪些必需或可选权限（如果有）。到目前为止，我所知道的是我可能必须在其中包含“clipboardRead”权限。

还是我打算在清单中使用 content_scripts 。

这是我的清单。

{
  "manifest_version": 2,

  "name": "PhotoTagger",
  "description": "This extension helps you create your hashtags for your posts, quickly.",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["PhotoTagger.js"]
    }
  ],

  "permissions": [
    "clipboardRead",
  ],

  "browser_action": {
    "default_icon": "icons/Google-plus-19x19.png",
    "default_popup": "PhotoTagger.html"
  }
}

我的javascript中的一个示例函数是这个（PhotoTagger.js）：

function selectText(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
    }
}

这是我调用 Js 函数的 html 的示例片段：

<li id="#Sydney" onclick="selectText('#Sydney')">
    <input id="al2" type="checkbox" value="#Sydney +104262770460851770269"/>
    #Sydney</li>

非常感谢我能得到的任何帮助。

还要提到 html 在 chrome 中打开的选项卡上工作正常。当我将它作为扩展运行时，它不起作用。

4

1 回答 1

0

我刚刚开始使用 ChromeExtensions，所以这可能不是一个完整的答案，但这里有一些我看到的问题：

  1. content_scripts 被注入页面并可以访问网页的 dom，但不是 JS
  2. 弹出窗口存在于他们自己的沙箱中，并且只能访问该沙箱中的内容
  3. 网页无法在 content_scripts 或弹出窗口中访问 JS

PhotoTagger.html 应该能够与它自己的 JS 交互，只需放入一个引用 PhotoTagger.js 的“脚本”标签。不需要任何权限。因此，如果您的代码片段在 PhotoTagger.html 中，并且在 PhotoTagger.html 中有对 PhotoTagger.js 的“脚本”引用，那么您应该没问题（并且您可以摆脱整个 content_scripts 部分）。如果您这样做但它不起作用，您可能需要链接更多代码。

但是，如果您正在加载带有该 html 片段的网页，它将无法正常工作。该网页无法访问 content_scripts 或弹出窗口中的 JS（我仍在寻找解决方法，但由于安全问题而被阻止）。

于 2013-09-05T15:57:41.710 回答