首页猿问 Chrome扩展中的onClick不工作

Chrome扩展中的onClick不工作

JavaScript

冉冉说 2019-06-01 13:46:59

Chrome扩展中的onClick不工作这似乎是最容易做的事情，但它只是不起作用。在普通浏览器中.html和.js文件运行良好，但在Chrome扩展中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”。再说一遍，它在浏览器中工作得很好，但在扩展中却不起作用。你知道为什么吗？以防万一，我也会在下面附于清单.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 回答

慕斯王

TA贡献1864条经验获得超2个赞

Chrome扩展不允许您使用内联JavaScript(文献资料)。你将不得不做一些类似的事情。

为链接分配一个ID(<a onClick=hellYeah("xxx")>成<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');
    });});

反对回复 2019-06-01

慕容森

TA贡献1853条经验获得超18个赞

原因

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

内联JavaScript不会被执行。这一限制既禁止内联，也禁止内联。<script>砌块和内联事件处理程序(例如：<button onclick="...">).

如何检测

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

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src‘Self’chrom-扩展名：”。要么是‘不安全-内联’关键字，要么是散列(‘sha256-.’)，或者是现在(‘none-.’)需要启用内联执行。

要访问弹出窗口的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 filefunction handler() {
  /* ... */}

请注意DOMContentLoaded事件。这确保元素在执行时存在。现在添加脚本标记，例如在<head>文件：

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

如果使用jQuery，则可以选择：

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

放宽政策

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

答：不管错误怎么说，你不可能启用内联脚本:

没有任何机制可以放松对执行内联JavaScript的限制。特别是，设置脚本策略，其中包括'unsafe-inline'不会有任何效果。

最新情况：从Chrome 46开始，可以白化特定的内联代码块：

从Chrome 46开始，可以通过在策略中指定源代码的base 64编码哈希来白化内联脚本。此散列必须以所使用的哈希算法(Sha 256、Sha 384或Sha 512)作为前缀。看见散列用法<script>元素举个例子。

但是，我不太清楚使用它的原因，而且它也不会启用内联属性，例如onclick="code".

反对回复 2019-06-01

开心每一天1111

TA贡献1836条经验获得超13个赞

我决定公布我在我的案例中使用的例子。我试图用脚本替换div中的内容。我的问题是Chrome没有识别/没有运行这个脚本。

更详细地说，我想要做的是：单击一个链接，并将该链接“读取”一个外部html文件，将其加载到div部分中。

我发现，通过使用调用的ID将脚本放在DIV之前，脚本无法工作。
如果脚本在另一个DIV中，它也不能工作。

脚本必须使用document.addEventListener(‘DOMContentLoade’)编写，函数()

    <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>

反对回复 2019-06-01

4 回答
0 关注
1668 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

Chrome扩展中的onClick不工作

Chrome扩展中的onClick不工作

4 回答

原因

如何检测

如何修复

放宽政策

添加回答