google扩展开发popup.html,chrome扩展开发问题总结
console.log
Chrome扩展分为三部background.html/js,popup.html和content_script.js。background和content_script可以通过console.log打印调试信息。popup不能用console.log,在stackoverflow上有一些解决方案,但是都不好使,最后退而求其次,用alert代替。
如何刷新扩展?
popup.html和内嵌的css和js修改后,下次再打开popup页时,popup页已经自动更新了。
content_scropt.js修改后,更新扩展并且刷新页面(只刷新页面没用)后,修改才会生效。
popup.html内嵌script不执行
popup.html只能添加js文件。如果在script标签中要运行一段js代码,打开popup页时在扩展程序页会报错,这段代码不会执行。如下所示,提示违反了内容安全政策。
内嵌js错误提示.png
解决方法是把这段代码放到内嵌的js文件里面去。
popup.html加载js跟content_scripts不同
popup.html生命周期很短(从点击扩展图标弹出popup页到popup页失去焦点而关闭),而且是唯一的,但是很完整(有自己的页面,也自己的css和js)。
content_script.js生命周期基本上跟被扩展的网页一样长(受content_scripts.run_at影响),不是唯一的(content_scripts.js可指定多个js),依附于被扩展的网页(可访问DOM,但跟页面内嵌的js不在同一个名字空间,也就不能访问内嵌js)
js的异步回调
接连好几个bug,发现都是没有理解js的异步回调导致的,还是用的过程化方式来考虑。例如,如下代码
elNo.addEventListener('change', function() {
chrome.storage.local.get('choise', function(item) {
//alert('Your choise:' + item.choise);
})
// popup主动发消息给content-script
sendMessageToContentScript({cmd:'get-selected'}, (response) => {
if(response) {
var issues = JSON.parse(response)
alert('respond from content-script:selected num='+ issues.length + ', items=' + issues[0] + ', ' + issues[1]);
}
});
$(function() {
$('.demo').fSelect();
});
})
这段代码的原意是先从chrome.storage.local获取配置,然后再通过content-script获取被扩展页面的信息,最后再调用fSelect(fSelect依赖前两步的结果)。
但是chrome.storage.local.get和** sendMessageToContentScript都是异步函数,也就是说,上面代码这三部分虽然是顺序写的,但是运行时却是并行执行的,fSelect执行的时候,chrome.storage.local.get可能都没有返回,导致fSelect**执行时总是数据不对。加了一堆打印,才发现是时序的问题。
异步的玩法是这样的:
elNo.addEventListener('change', function() {
chrome.storage.local.get('choise', function(item) {
//alert('Your choise:' + item.choise);
sendMessageToContentScript({cmd:'get-selected'}, (response) => {
if(response) {
var issues = JSON.parse(response)
alert('respond from content-script:selected num='+ issues.length + ', items=' + issues[0] + ', ' + issues[1]);
$(function() {
$('.demo').fSelect();
});
}
});
})
})
打包和解析消息
发送请求和接收回应
// 获取当前选项卡ID
function getCurrentTabId(callback)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
if(callback) callback(tabs.length ? tabs[0].id: null);
});
}
// 向content-script主动发送消息
function sendMessageToContentScript(message, callback)
{
getCurrentTabId((tabId) =>
{
chrome.tabs.sendMessage(tabId, message, function(response)
{
if(callback) callback(response);
});
});
}
sendMessageToContentScript({cmd:'get-selected'}, (response) => {
if(response) {
var issues = response
alert('respond from content-script:selected num='+ issues.length + ', items=' + issues[0] + ', ' + issues[1]);
$(function() {
$('.demo').fSelect();
});
}
});
接收请求和发送回应
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
//alert('收到来自 ' + (sender.tab ? "content-script(" + sender.tab.url + ")" : "popup或者background") + ' 的消息:'+ request);
if(request.cmd == 'get-selected') {
var selected = [];
$('.demo').find('option:selected').each(function() {
selected.push(this.innerText);
});
console.log('recv from popup(get-selected).')
sendResponse(selected)
}
});
值得注意的是,通信双方是通过JSON对象进行通信的,而不是JSON字符串,所以可以直接取用,不需要解析。
google扩展开发popup.html,chrome扩展开发问题总结相关推荐
- 这5个可以提高前端开发效率的 Chrome扩展程序,建议你尝鲜体验下
扩展程序是个性化的小程序,可以为你的浏览器添加新功能.你可以通过 Chrome 应用商店添加扩展程序来定制 Chrome 使用体验. 以下是我用来保持专注和提高开发效率的五个 Chrome 扩展程序: ...
- chrome扩展程序科学_5 Chrome扩展程序可简化您作为数据科学家的生活
chrome扩展程序科学 Chrome extensions are fantastic, useful species of software that you can add to your Ch ...
- 微软Edge扩展工具箱旨在将Chrome扩展带至Edge
微软Windows 10新工具Edge扩展工具箱旨在让开发人员可以轻松地将Chrome扩展转换为微软Edge扩展. \\ 微软Edge扩展工具箱的目标是在少修改或不修改的情况下将Chrome扩展移植到 ...
- 推荐一个有趣的Chrome扩展程序-查看任意网站的开发技术栈
对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue.在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的. C ...
- chrome扩展写法
最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展,但是由于不经常写,也没做积累也都忘记了,现在重新回顾一下. 一.chrome扩展基本概念 chrome扩展 ...
- WEB之浏览器使用入门--chrome扩展插件安装及好用的扩展插件小集合
chrome插件 chrome本身是浏览器,提供最基本的谷歌提供的浏览器相关的功能.但是仅仅有基本的chrome本体在很多时候使用还是会感到力不从心,对浏览器本身通过安装一些常用的扩展(extenti ...
- 【译】Chrome 扩展 : 入门
引子 按照 Chrome 扩展 : 扩展是什么?中引导,接着就是入门教程. 原文:Getting started 版本:Updated on Wednesday, November 18, 2020 ...
- 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍
在Chrome网上应用店中查找扩展程序 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍 可扩展的Chrome Web浏览器比某些人认识的功能强大得多.您可以自定义浏览体验,使其 ...
- chrome扩展——bilibili视频封面获取器
(2018.7)由于bilibili更改了封面链接的位置,所以下面的代码已经无法使用,新版请见:https://github.com/akimusume/GetBilibiliVideoCover 昨 ...
最新文章
- matlab怎么分析一段音频,Matlab分析音频
- 【Verilog HDL 训练】第 06 天(边沿检测)
- MacBook Pro休眠掉电、耗电量大问题解决方案
- mysql 从第二行开始_Mysql主备一致性问题
- 数据结构习题精解 C语言实现+微课视频(习题解答、研考试题、微课视频)
- c++ 和 C语言 中数组语法的比较
- 八年技术加持,性能提升10倍,阿里云HBase 2.0首发商用
- 剪切板复制word图片是本地路径_如何将图片数学公式快速输入到Word中?
- Mysql(5)——数据库中表的操作(1)
- 你不懂API接口是什么?怎么和程序员做朋友
- 数据仓库etl编程_莱牛教育:浅谈大数据ETL大数据工程师所需具备的能力
- 基于JAVA+SpringMVC+MYSQL的超市进销存
- 原 matplotlib命令与格式:系统字体与显示中文
- UE4+Cesium
- ASU计算机科学专业大学排名,2013年U.S.News美国大学排名--计算机科学专业研究生排名...
- 修改人人商城支付后报错“服务器暂时无法处理您的请求,请稍后重试“
- AdGuard过滤规则
- 简单记录使用org.slf4j.MDC进行日志追踪
- ChatGPT 账号被封?推荐 5 款国外网站,完美替代!
- Qt的QProgressDialog使用两条总结(去掉帮助和关闭、设置尺寸)