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

最新推荐文章于 2023-12-28 16:55:45 发布

LetsStudy

最新推荐文章于 2023-12-28 16:55:45 发布

阅读量446

点赞数

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

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

版权

23 篇文章 1 订阅

订阅专栏

一、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)
})

完整代码

关注