80

这似乎是最简单的事情，但它只是不工作。在普通浏览器中，.html 和 .js 文件可以完美运行，但在 Chrome/Firefox 扩展程序中，该onClick功能无法执行应有的功能。

.js 文件：

function hellYeah(text) {
  document.getElementById("text-holder").innerHTML = text;
}

.html 文件：

<!doctype html>
<html>
  <head>
    <title>
      Getting Started Extension's Popup
    </title>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="text-holder">
      ha
    </div>
    <br />
    <a onClick=hellYeah("xxx")>
      hyhy
    </a>
  </body>
</html>

所以基本上一旦用户点击“hyhy”，“ha”应该变成“xxx”。再一次 - 它在浏览器中完美运行，但在扩展程序中不起作用。你知道为什么吗？以防万一我也在下面附加 manifest.json。

清单.json：

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}
4

5 回答 5

137

Chrome 扩展程序不允许您使用内联 JavaScript（文档）。
Firefox WebExtensions（文档）也是如此。

你将不得不做类似的事情：

为链接分配一个 ID ( <a onClick=hellYeah("xxx")>become <a id="link">)，并用于addEventListener绑定事件。将以下内容放入您的popup.js文件中：

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {
        hellYeah('xxx');
    });
});

popup.js应作为单独的脚本文件加载：

<script src="popup.js"></script>
于 2012-11-27T19:58:50.713 回答
45

原因

这不起作用，因为 Chrome通过内容安全策略禁止在扩展程序中使用任何类型的内联代码。

内联 JavaScript 将不会被执行。此限制禁止内联<script>块和内联事件处理程序（例如<button onclick="...">）。

如何检测

如果这确实是问题所在，Chrome 会在控制台中产生以下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self' chrome-extension-resource:”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-...”）或随机数（“nonce-...”）。

要访问弹出窗口的 JavaScript 控制台（通常对调试很有用），请右键单击扩展程序的按钮并从上下文菜单中选择“检查弹出窗口”。

此处提供了有关调试弹出窗口的更多信息。

怎么修

需要删除所有内联 JavaScript。Chrome 文档中有一个指南。

假设原来的样子：

<a onclick="handler()">Click this</a> <!-- Bad -->

需要删除onclick属性并给元素一个唯一的 id：

<a id="click-this">Click this</a> <!-- Fixed -->

.js然后从脚本附加监听器（假设必须在文件中popup.js）：

// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", handler);
});

// The handler also must go in a .js file
function handler() {
  /* ... */
}

注意事件中的包装DOMContentLoaded。这可确保元素在执行时存在。现在添加脚本标签，例如在<head>文档中：

<script src="popup.js"></script>

如果您使用 jQuery，则另一种选择：

// jQuery
$(document).ready(function() {
  $("#click-this").click(handler);
});

放宽政策

问：错误提到了允许内联代码的方法。我不想/不能更改我的代码，如何启用内联脚本？

答：尽管错误说明了什么，但您无法启用内联脚本：

没有机制可以放宽对执行内联 JavaScript 的限制。特别是，设置包含的脚本策略'unsafe-inline'将不起作用。

更新：从 Chrome 46 开始，可以将特定的内联代码块列入白名单：

从 Chrome 46 开始，可以通过在策略中指定源代码的 base64 编码哈希来将内联脚本列入白名单。此哈希必须以使用的哈希算法（sha256、sha384 或 sha512）作为前缀。有关示例，请参阅元素的哈希用法。<script>

但是，我看不出使用它的理由，而且它不会启用像onclick="code".

于 2014-09-08T09:46:57.630 回答
1

如前所述，由于安全原因，Chrome 扩展程序不允许使用内联 JavaScript，因此您也可以尝试此解决方法。

HTML 文件

<!doctype html>
    <html>
        <head>
            <title>
                Getting Started Extension's Popup
            </title>
            <script src="popup.js"></script>
        </head>
        <body>
            <div id="text-holder">ha</div><br />
            <a class="clickableBtn">
                  hyhy
            </a>
        </body>
    </html>
<!doctype html>

popup.js

window.onclick = function(event) {
    var target = event.target ;
    if(target.matches('.clickableBtn')) {
        var clickedEle = document.activeElement.id ;
        var ele = document.getElementById(clickedEle);
        alert(ele.text);
    }
}

或者，如果您包含一个 Jquery 文件，那么

window.onclick = function(event) {
    var target = event.target ;
    if(target.matches('.clickableBtn')) {
        alert($(target).text());
    }
}
于 2020-04-20T18:34:18.053 回答
1

我有同样的问题，不想重写代码，所以我写了一个函数来修改代码并创建内联声明的事件：

function compile(qSel){
    var matches = [];
    var match = null;
    var c = 0;

    var html = $(qSel).html();
    var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;

    while (match = pattern.exec(html)) {
        var arr = [];
        for (i in match) {
            if (!isNaN(i)) {
                arr.push(match[i]);
            }
        }
        matches.push(arr);
    }
    var items_with_events = [];
    var compiledHtml = html;

    for ( var i in matches ){
        var item_with_event = {
            custom_id : "my_app_identifier_"+i,
            code : matches[i][5],
            on : matches[i][3],
        };
        items_with_events.push(item_with_event);
        compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
    }

    $(qSel).html(compiledHtml);

    for ( var i in items_with_events ){
        $("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
            eval(items_with_events[i].code);
        });
    }
}

$(document).ready(function(){
    compile('#content');
})

这应该从所选节点中删除所有内联事件，并使用 jquery 重新创建它们。

于 2015-08-04T21:39:15.643 回答
1

我决定发布我在案例中使用的示例。我尝试使用脚本替换 div 中的内容。我的问题是 Chrome 无法识别/没有运行该脚本。

更详细我想做的事情：单击一个链接，然后该链接“读取”外部 html 文件，它将被加载到 div 部分中。

  • 我发现通过将脚本放在被调用的带有 ID 的 DIV 之前，脚本不起作用。
  • 如果脚本在另一个 DIV 中，它也不起作用

  • 脚本必须使用 document.addEventListener('DOMContentLoaded', function() 进行编码，因为它被告知

        <body>
    <a id=id_page href ="#loving"   onclick="load_services()"> loving   </a>

        <script>
                // This script MUST BE under the "ID" that is calling
                // Do not transfer it to a differ DIV than the caller "ID"
                document.getElementById("id_page").addEventListener("click", function(){
                document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
            </script>
    </body>

  <div id="mainbody" class="main_body">
        "here is loaded the external html file when the loving link will 
         be  clicked. "
  </div>
于 2018-10-31T19:46:10.197 回答