对于一直从事前端开发者的你,在未开发过任何插件的前提下,肯定会很想知道,chrome插件开发和普通网页开发有什么区别呢? 如何从0开始着手开发chrome插件呢?下面跟随这片文章来一起学习chrome插件的开发的流程吧~
首先,这几个网站你必须要提前了解:
chrome插件开发官方文档:https://developer.chrome.com/docs/extensions/mv3/
chrome扩展程序调试地址:chrome://extensions/ (注意:需要打开开发者模式)
chrome应用商店:https://chrome.google.com/webstore/category/extensions
chrome插件其实就是使用前端语法+调用chrome浏览器的API开发的,所以我们必须得了解chrome浏览器的API以及文件结构。
步骤1: 启用开发者模式
在chrome浏览器中,打开扩展程序页面chrome://extensions/,启用开发者模式,如图所示:
步骤2: 创建插件清单文件manifest.json
manifest.json清单文件此JSON文件描述插件的功能和配置,是必须配置的,位于项目根目录
2.1 基本配置
{
“manifest_version”: 3, 插件版本,现在都用3了,后面就会不再支持版本2
“name”: “Hello Extensions”, 插件名称
“description”: “Base Level Extension”, 插件描述
“version”: “1.0”, 插件开发版本
}
2.2 action : 声明插件图标和点击后展示的页面
{
…
“action”: {
“default_popup”: “hello.html”, 点击扩展图标时,弹出的HTML页面
“default_icon”: { 用于指定插件在不同位置的默认图标
“16”: “images/icon16.png”,
“32”: “images/icon32.png”,
“48”: “images/icon48.png”,
“128”: “images/icon128.png”
}
},
“icons”: { 当用户在 Chrome Web Store 中浏览插件或在安装插件时看到插件的图标时,会使用 icons 指定的图标
“128”: “icons/icon128.png”,
“48”: “icons/icon48.png”,
“16”: “icons/icon16.png”
},
}
2.3 声明内容脚本content_scripts,这个也是manifest.json很重要的一点
{
…
“content_scripts”: [
{
“js”: [“scripts/content.js”], 内容脚本路径
“matches”: [
“https://developer.chrome.com/docs/extensions/*”, 需要插入内容脚本的网址
]
}
]
}
注意:matches里面匹配的网址后面要带*,除非你只在这个网站某个固定网址使用,否则都加*,不然会出现content.js加载失败,无法插入到该网站中,如果要支持所有网站,则设置"matches": ["<all_urls>"]
2.4 service_worker : 在后台监听浏览器事件(service_worker是特殊的javascript环境,加载它处理事件并在不需要时终止)
{
…
service_worker: “scripts/background.js”
}
2.5 host_permissions: 插件可以与特定主机进行通信、访问和修改网页内容
{
...
"host_permissions": [
"https://example.com/*",
"http://www.example.org/",
"https://api.example.net/"
]
}
例如我们需要在service_worker.js文件中获取某个网站缓存的数据,则首先需要在清单文件中“host_permissions”声明该网站,然后才能获取,如下所示
chrome.runtime.onInstalled.addListener(() => {
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
chrome.tabs.get(tabId, async(updatedTab) => {
const url = new URL(updatedTab.url);
if (url.hostname === ‘example.com’) {
// 在控制台打印存储的数据
const data = await chrome.scripting.executeScript({
target: { tabId: tab.id },
function: () => {
return {
userInfo: sessionStorage.getItem(‘userInfo’),
};
}
});
if(data && data.length){
userInfo = JSON.parse(data[0].result.userInfo);
}
}
});
});
});
步骤3: 开发插件功能
根据插件的需求,创建相应的 HTML、CSS 和 JavaScript 文件,
使用 JavaScript 编写插件的逻辑和功能。您可以通过 DOM 操作、事件处理和与chrome API 的交互来实现所需的功能。
步骤4: 加载和调试
加载插件:首先在chrome浏览器地址栏输入chrome://extensions/开发扩展程序页面,点击左上角的“加载已解压的扩展程序”,把自己本地的文件夹直接导入进去,如下图所示。
调试service_worker.js文件
调试popup.js文件
鼠标点击插件,点击右键菜单会出现“审查弹出内容”,即可进行调试
调试content_script.js文件
打开manifest.json中配置content_script对应的网站地址,F12打开调试,如果下方出现了你开发的插件名称以及文件,则代表你的页面成功插入该网站,在console中即可进行调试
步骤5: 打包和发布插件
chrome中也支持自己打包文件,打包之后生成后缀为.crx的文件,然后把.crx结尾的插件导入到浏览器,但是未发布的插件,开关无法打开,一直处于置灰状态,导致无法使用,查看详情才知道Chrome 只允许使用 Chrome 应用商店中发布的扩展程序
相关说明文档如下:https://support.google.com/chrome_webstore/answer/2811969?visit_id=638279384706503272-341708265&p=ui_remove_non_cws_extensions&hl=zh-Hans&rd=2
注册以及发布流程如下:
chrome应用商店点击注册,就会看到如下图所示。首先同意左侧的开发者协议和政策,然后去支付注册费5美元进行注册。
这个注册支付,不能用国内的银行卡以及信用卡,要用Visa卡,没有的话也没关系,可以直接去淘宝买一个。
chrome应用商店注册成功之后,先把本地文件压缩为.zip格式,点击上传即可(最多支持发布20个插件)。
上传成功后,需要你填写一些关于插件相关信息,填写完整之后右上角的“提交审核”按钮才会高亮,然后就能提交审核了。
注意chrome插件的公开范围越广,审核时间越长。
常用的chrome API
chrome.runtime
:提供与插件运行时环境交互的功能,包括管理插件的生命周期、发送消息、注册事件监听器等。
chrome.extension
:这个 API 已被废弃,不推荐使用。它提供了一些与插件相关的功能,例如获取插件的 URL、向页面注入脚本等。相应的功能可以使用 chrome.runtime 替代。
chrome.tabs
: 允许与浏览器标签页进行交互,包括获取当前标签页信息、打开新标签页、切换标签页、执行脚本等。
chrome.windows
: 允许与浏览器窗口进行交互,包括获取当前窗口信息、打开新窗口、切换窗口、调整窗口大小等。
chrome.storage
: 提供持久化存储功能,用于在插件中保存和检索数据,包括使用
chrome.storage.local
: 进行本地存储和 chrome.storage.sync 进行跨设备同步。
chrome.runtime.sendMessage
: 用于在插件组件之间发送消息,可以实现不同组件之间的通信和数据传递。
chrome.runtime.onMessage
:注册消息监听器,用于接收其他组件发送的消息,并进行相应的处理。
chrome.browserAction
:允许在浏览器工具栏中创建图标按钮,并定义与按钮相关的交互行为,例如点击按钮时打开弹出窗口或执行特定操作。
chrome.contextMenus
: 允许在浏览器右键菜单中添加自定义菜单项,并定义菜单项的点击行为。
chrome.webRequest
: 允许拦截和修改网络请求,包括请求的头部、URL、响应内容等,以实现网络请求的修改和过滤。
chrome.notifications
:允许在操作系统通知区域显示通知,以向用户发送系统级别的提示和提醒。
chrome.identity:
提供身份验证和用户信息相关的功能,例如使用 OAuth2 进行用户身份验证。
今天的文章chrome插件开发全攻略_浏览器插件制作教程「建议收藏」分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/79898.html