20、开发chrome插件的一些问题

最新推荐文章于 2024-04-16 10:39:42 发布

LetsStudy

最新推荐文章于 2024-04-16 10:39:42 发布

阅读量615

点赞数

分类专栏： Question And Knowledge 文章标签： chrome javascript html

本文链接：https://blog.csdn.net/LetsStudy/article/details/119957190

版权

Question And Knowledge 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了在Chrome92版本中遇到的JavaScript相关问题，包括：JS引入类型识别错误、事件绑定失效、JS引入位置影响、chrome.tabs.executeScript的文件路径问题、异步处理及本地存储使用。解决方案包括修改JS引入类型、使用DOM操作添加事件监听器、将JS放在body内、指定完整文件路径以及注意异步回调。此外，还提到了chrome.storage的使用情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、js引入问题

<script type="application/javascript" src="jquery-1.8.3.js"></script>

在chrome 92版本，使用上述方式引入，会报无法识别$变量错误

需要将引入type改变为text/javascript后，可以使用$变量引用

 <script type="text/javascript" src="jquery-1.8.3.js"></script>

二、事件问题

在给popup.html中的元素添加事件，发现事件没生效，改为js添加事件后正常触发

popup.js

document.getElementById("start").addEventListener('click',function (){
    var bg = chrome.extension.getBackgroundPage();
    bg.Test()
})

三、js引入位置问题

js放在head标签下引入，发现js没有生效，改为body标签内引入，js正常使用

<body>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</body>

四、chrome.tabs.executeScript方法中file路径问题

excute.js和background.js都在js目录下，使用未生效

chrome.tabs.executeScript(tabs[0].id,{file:'excute.js'})

改为如下，正常执行

chrome.tabs.executeScript(tabs[0].id,{file:'js/excute.js'})

五、异步问题

在使用如下代码，返回tabId后，在popup.js中调用，发现并没有正确输出tabId，原因就是忽略了function(tabs)回调函数的异步问题

chrome.tabs.query({active: true, currentWindow: true}, function(tabs)

六、本地存储问题

在popup.js中使用chrome.storage的api进行数据存储，并不能在tab页面的application面板下的localstorage中看到对应的数据，也不能在拓展的localstorage中看到。

直接在popup.js中使用，在内容脚本中获取即可

popup.js

chrome.storage.sync.set({'tag': tagArray}, function() {
            console.log('success！');
        });

动态注入excute.js

chrome.storage.sync.get(['tag', 'id', 'class'], function (items) {
    filter(items.tag, items.id, items.class)
})

完整代码

https://github.com/wxwcd/del_elementshttps://github.com/wxwcd/del_elements