Chrome扩展学习总结

拼搏现实的明天。 2024-02-19 22:01 67阅读 0赞































资料 谷歌官方文档 ;360极速浏览器开发文档百度浏览器开发文档
manifest.json

http://open.chrome.360.cn/extension_dev/manifest.html

https://chajian.baidu.com/developer/extensions/manifest.html#overview.html 【推荐】

chrome.storage https://chajian.baidu.com/developer/extensions/storage.html#property-managed
chrome.tabs https://chajian.baidu.com/developer/extensions/tabs.html#method-create
background.js

跨域获取资源信息尽可能的写在background.js里面。
在content里面需要获取资源信息的时候通知background去获取。

https://www.chromium.org/Home/chromium-security/extension-content-script-fetches【需翻墙】

content_script.js

content_script.js有一些限制:


   

#

1、Chrome扩展文件位置

Chrome扩展文件以.crx为后缀名,在Google Chrome扩展官方网站下载扩展时,一般会下载到目录C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions 下图中是“Postman”扩展目录的截图:

20190813155215617.png

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70

可以看见:一个 Chrome扩展是一个配置(入口)文件 manifest.json 和一系列 html、css、js、图片文件的集合,然后将代码使用Chrome打包成crx文件。

2、chrome调试和打包(假设已创建好项目)

打开浏览器右上角设置图标 > 更多工具 > 扩展程序

加载扩展项目后,浏览器右上角就出现我们的插件了,可以进行测试了,如果修改了代码,点击“重新加载(Ctrl + R)” 后可重新测试。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1

项目开发完成后,需打包成 .crx 插件包。

步骤:勾选开发者模式 → 点击“打包扩展程序” → 选择扩展程序根目录 → 确定打包 → 打开电脑中扩展程序根目录文件夹,将里面刚刚打包生成的crx文件拖到 Chrome扩展程序页面中,即可完成安装。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 2

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 3

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 4

3、调试background.js

点击背景页,在控制台打印出chrome的详细信息:console.log(‘chrome’, chrome);

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 5

发表评论

表情:
评论列表 (有 0 条评论,67人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Chrome添加扩展程序

    Chrome之所以强就强在它的扩展程序,那么如何添加Chrome扩展程序呢? 如果进行翻墙的话,那样最好,可以直接通过在商店里进行下载。如果不能进行翻墙的话,也可以通过其他的

    相关 chrome扩展——Postman

            今天需要测试一个http的接口,以前都是使用java的httpClient工具jar,自己编写代码去调试,但这种方式比较死板,每次都要运行一段代码...于是就像