Chrome插件开发(三)

简介: Chrome插件开发(三)

在日常工作中,我们可能经常需要在手机端测试我们所做的页面,如果每次在手机端测试都手输网址,网址短的还好,如果长的网址也需要一个字母一个字母去敲,那无疑是一场噩梦,试想我们有一个工具只需要点击一个按钮就可以将当前网址生成二维码,而手机端仅仅需要扫一扫就可以打开我们想要测试的网址,是不是很美好呢?下面我们就自己动手从零开始实现一个生成当前网址二维码的插件。在开始编写之前,我们需要先做一点点知识预备:

1、我们之前在讲基础知识的时候有提到browser_action和page_action这两个东西,前者是表示这是一个浏览器行为,其图标显示在地址栏右侧,而后者表示这是一个页面行为,其图标现在在地址栏后面,当然在现在的浏览器上是看不出来这个区别的,他们两个不能同时定义,那么网址二维码生成是一个浏览器行为还是一个页面行为呢?就其行为而论网址二维码生成是将页面的网址生成二维码,所以毫无疑问它应该是一个页面行为。

2、我们需要使用到的API:

(1)chrome.pageAction.show 在特定标签特定行为情况下显示页面行为的图标,与之对应的还有chrome.pageAction.hide,在特定标签特定行为下隐藏页面行为的图标,使用方式:

 chrome.pageAction.show(tabId);
 chrome.pageAction.hide(tabId);

(2)chrome.tabs.onUpdated 这是一个回调函数,我们需要在tab更新的时候选择是要显示还是隐藏页面行为的图标。

 chrome.tabs.onUpdated.addListener(function(tabId, info) {
   chrome.pageAction.show(tabId);
 });

(3)chrome.tabs.getSelected 获取当前选中的选项卡的明细。由于上面使用了tabs相关API,别忘记需要在manifest.json中申请tabs权限。

3、网址生成二维码选择直接调用api,这里选择使用联图的API:

1 http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=https://www.deanhan.cn

在了解了上面的基础点之后,是时候展示真正的技术了,首先规划一下目录结构:

核心文件manifest.json代码:

 {
      "name": "二维码生成器",
      "version": "1.0",
      "description": "二维码生成器",
相关文章
|
6天前
|
Web App开发
推荐一款chrome阅读插件
推荐一款chrome阅读插件
17 2
|
19天前
|
存储 Web App开发 JSON
【Chrome插件】如何在Chrome插件开发中处理复杂数据结构的存储?
在Chrome插件开发中,遇到问题:存储包含Map和数组的复杂数据结构到`chrome.storage.local`时,读取为空。原因在于`chrome.storage.local`只支持JSON序列化,而Map无法直接序列化。解决方案是使用`serializeMap`和`deserializeMap`方法将Map转换为数组进行存储和读取。更新的`saveMindData`和`getMindData`方法实现了数据的正确序列化和反序列化。
42 5
|
23天前
|
Web App开发 前端开发 安全
Chrome 插件打包发布
Chrome 插件打包发布
28 0
|
23天前
|
Web App开发 JSON JavaScript
Chrome 插件各模块之间的消息传递
Chrome 插件各模块之间的消息传递 一、消息传递 1. 消息传递分类 Chrome 插件的 Action、Background 和 content_script 三个模块之间的信息传输 插件和插件之间的信息传输 网页向插件进行信息传输 与原生应用进行消息传递
18 0
|
23天前
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
25 0
|
2月前
|
Web App开发 前端开发 JavaScript
Chrome 插件如何开发?
Chrome 插件如何开发?
|
2月前
|
Web App开发 前端开发 JavaScript
折腾Chrome插件,简单地让文本上色~
折腾Chrome插件,简单地让文本上色~
24 0
|
2月前
|
Web App开发 存储 API
折腾Chrome插件,让内容脚本与文本交互~
折腾Chrome插件,让内容脚本与文本交互~
40 0
|
2月前
|
Web App开发
折腾Chrome 插件,怎么给右键菜单增加“选项”?
折腾Chrome 插件,怎么给右键菜单增加“选项”?
34 0
|
2月前
|
Web App开发 JavaScript 前端开发
Chrome插件(二)—Hello World!
Chrome插件(二)—Hello World!
29 0