谷歌浏览器插件开发指南涉及以下几个方面:
1. 开发环境准备:首先需要安装Chrome浏览器和开发者工具。进入Chrome应用商店,搜索“Extensions Reloader”和“Manifest Viewer”两个插件进行安装,这两个插件可以方便开发和调试。
2. 创建插件:创建插件的方式有两种。第一种是从零开始创建,需要编写插件的各种文件,包括manifest.json、popup.html等。第二种是使用生成工具,如Yeoman,它可以自动生成插件文件和代码结构。
3. 编写插件代码:插件代码可以使用HTML、CSS、JavaScript等,需要根据插件的功能进行编写。
4. 调试和测试:在Chrome浏览器中可以使用开发者工具进行调试和测试,可以查看插件的运行状态,以及对代码进行修改和调试。
5. 发布和分发:发布插件需要一个Google开发者账号,并进行相应的审核和测试。插件发布后可以通过Chrome应用商店进行分发和安装。
总的来说,谷歌浏览器插件开发需要学习HTML、CSS、JavaScript等相关知识,并掌握Chrome插件开发的基本流程和技能。
Chrome插件本质上也是一个web页面的功能开发,因此需要熟悉以下基本的技能:
下面开始正题。
ChromeAPI是Chrome浏览器提供的JavaScriptAPI,在插件开发中使用这些API可以调用Chrome浏览器的提供的诸多功能,完成我们定制化的需求。
也叫插件清单,可以把它理解为整个插件的配置文件。manifest文件一定要放在根目录下,不可或缺,主要记录了插件的重要元数据、资源定义、权限声明,以及指定要在后台运行和页面运行的文件等。
// manifest.json文件
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
其中manifest_version
、name
、version
是必须的。
也就是后台服务,主要是负责处理和监听浏览器的各类事件。后台服务可以使用所有ChromeAPI,但是不能直接与网页内容交互。
要使用后台服务,需要先在manifest文件中注册background:
{
...
"background": {
"service_worker": "background.js"
}
}
后台服务在浏览器运行起来后,就会一直在后台运行back.js脚本。
也叫内容脚本。上面提到后台服务无法直接与网页内容进行交互,而内容脚本便来接替了这部分工作。内容脚本可以读取、修改或注入页面DOM,也可以使用一部分的ChromeAPI,但是不可使用的那部分ChromeAPI可以通过与后台服务的通讯来完成数据或消息的传递交互。
要使用内容脚本,需要先在manifest文件中注册content_scripts:
{
...
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
其中,matches表示匹配的网站,js表示执行的脚本。即如果网站地址在matches列表中,则会执行js列表中的脚本。
页面包含了popup的弹窗页面、option页面以及其他页面,这些页面也是就是前端开发中的HTML文件。这些页面都可以访问ChromeAPI。
以上便是Chrome插件开发中很重要且必要的几个概念,也是一个插件工程中主要的几个文件,因此请务必记住这几个概念。接下来,我们将一步一步开发一个插件,来逐步的了解Chrome插件开发的工作。
开发前,我们先来看看这个插件需要完成那些功能。
1、阅读时间:
2、聚焦模式:
3、标签管理:
思路:在内容脚本中使用js统计当前页面的文字数count,并假设阅读速度是500个/分钟,计算出预估时间:
time=count/500
先配置manifest文件:
{
"manifest_version": 3, // 版本号,目前2版本已经停止支持,推广的是3版本
"name": "toolKits", // 插件名称
"description": "小工具集", // 插件描述
"version": "1.0", // 插件开发的版本号,自定义即可
"icons": { // 插件的图标
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"content_scripts": [ // 内容脚本注册
{
"js": [
"scripts/baikeReadTime.js"
],
"matches": [
"https://baike.baidu.com/item/*"
]
}
]
}
从配置中可得知内容脚本的注册规则:当网址匹配上“https://baike.baidu.com/item/*”时,运行scripts/baikeReadTime.js脚本。
编写内容脚本,内容脚本是往页面中注入预估的阅读时间元素,代码如下:
// baikeReadTime.js
// 通过检查百度百科页面元素,确定大部分内容都是在class="main-content J-content"的div标签中,因此先获取到内容标签的dom
const mainContent = document.getElementsByClassName("main-content J-content")[0]
// 如果对应内容dom存在
if (mainContent) {
const text = mainContent.textContent; // 获取内容dom中所有的文本内容
const chineseWordRegExp = /[\u4e00-\u9fa5]/g; // 通过正则表达式匹配出所有的汉字
const chineseWords = text.matchAll(chineseWordRegExp);
const count = [...chineseWords].length; // 计算汉字长度
const readTime = Math.round(count / 500); // 计算预计阅读时间
const badge = document.createElement('span'); // 创建一个<span>标签
badge.classList.add('collect-text'); // 给<spn>标签添加样式 样式尽量跟周围的标签样式一致
badge.textContent = `️ 总字数约${count}, 预计阅读耗时:${readTime} 分钟`; // 给<span>标签添加文本内容
const topTool = document.getElementsByClassName("top-tool")[0] // 找到class="top-tool"的dom
topTool.insertAdjacentElement('beforebegin', badge); // 把<span>标签插入到topTool的dom前面
}
演示:打开Chrome浏览器,安装插件后,打开任意百度百科的内容页,即可看到我们注入到页面的预估阅读时间元素。比如我们打开百度百科,搜索“亚运会”,页面展示图待更新。
还是以百度百科页面为例,我们通过插件实现去掉右侧边栏和底部广告栏的信息
思路:分析页面元素,找到右侧边栏和底部广告栏的元素,再通过内容脚本对其进行样式隐藏即可。
1、首先给插件的图标设置一个徽标,用于展示聚焦模式的开关状态。
因为聚集模式的状态应该是在浏览器打开的时候就显示,因此设置状态徽标的逻辑应该放在background.js脚本中。具体代码如下:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({ "text": "OFF" })
})
调用ChromeAPI,给插件设置徽标。大致意思就是添加一个安装事件的监控器,当插件安装后就给插件设置一个徽标,内容是“OFF”。
监听插件的点击事件。当点击插件的时候,判断当前浏览器标签页(tab页)的网址,如果符合要求,就将插件徽标设置为“ON”。继续在background.js脚本中添加以下代码:
...
const baike = "baike.baidu.com/item/"
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.includes(baike)) { // 如果标签页的网址中包含baike的网址,则将插件徽标设置为“ON”
const prevState = await chrome.action.getBadgeText({ tabId: tab.id })
const nextState = prevState === "ON" ? "OFF" : "ON"
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState
})
}
})
以上两步使用到了Chrome的activeTab权限和scripting权限,因此我们需要再manifest文件中配置权限声明:
{
...
"permissions": [
"activeTab",
"scripting"
],
...
}
此时,重新加载插件后,如果当前标签页是百科页面,点击插件,就能看到切换徽标状态的效果的。
2、注入css,隐藏元素。
当徽标状态为ON时,给百科页面注入css,隐藏掉右侧边栏。继续在background.js脚本中添加以下代码:
...
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.includes(baike)) {
...
if (nextState === "ON") {
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
})
判断徽标状态,如果是“ON”,则往目标标签页插入css文件,否则就移除掉插入到目标页的css文件。上例中插入了focus-mode.css
编写注入的css文件,已达到隐藏侧边栏和底部广告栏的目的。通过分析网页的html代码可知,class="side-content"的标签即为侧边栏的元素标签,id="tashuo_bottom"的标签即为底部广告栏的标签,因此代码如下:
// focus-mode.css
.content {
.side-content {
display: none;
}
}
#tashuo_bottom {
display: none;
}
3、演示:
浏览器中重新加载插件后,在百科页点击插件,就能看到默认插件的聚集模式是“OFF”状态,点击后徽标更新为“ON”状态,且页面的侧边栏和底部栏都消失了,图待更新。
上面两个案例,我们分别体验了内容脚本和后台服务脚本的能力,接下来我们看看插件打开的页面相关的能力。
该功能我们期望点击插件,能打开一个弹窗页,在这个弹窗页中展示当前浏览器窗口的所有标签页,然后我们可以选择某些标签页将他们放在一个标签组中。
思路:实现popup页面,并在页面中展示当前浏览器窗口的所有标签页,然后页面中有按钮,可创建一个标签组,并将选中的标签页放到这个标签组中。
1、首先我们需要一个popup页面
html代码如下:
# popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./popup.css" />
</head>
<body>
<template id="li_template">
<li>
<a>
<h3 class="title">Tab Title</h3>
<p class="pathname">Tab Pathname</p>
</a>
</li>
</template>
<h1>Google Dev Docs</h1>
<button>新建/取消组合</button>
<ul></ul>
<script src="./popup.js" type="module"></script>
</body>
</html>
需要注意的是:这个popup.html无法运行内联 JavaScript,因此我们只能通过导入的方式,引入JavaScript脚本。
css代码如下:
# popup.css
body {
width: 20rem;
}
ul {
list-style-type: none;
padding-inline-start: 0;
margin: 1rem 0;
}
li {
padding: 0.25rem;
}
li:nth-child(odd) {
background: #80808030;
}
li:nth-child(even) {
background: #ffffff;
}
h3,
p {
margin: 0;
}
2、点击插件,触发弹窗
要实现点击插件就能打开popup弹窗页,有两中方式:
方法1:可以在manifest文件中的action字段中配置默认弹窗,代码如下:
{
...
"action": {
"default_popup": "popup.html"
},
...
}
该配置意思是点击插件时默认打开的弹窗就是“popup.html”文件。
方法2:后台脚本中通过监听点击事件,然后调用ChromeActionAPI的setPopup
方法实现。本插件因为之前实现了百度百科页面的聚焦模式功能,因此采用这种方式触发弹窗。对之前的代码做了些调整,具体如下:
// background.js
// 监听运行时和安装完成的事件
chrome.runtime.onInstalled.addListener(async () => {
// 获取当前浏览器窗口激活的标签页
tabs = await chrome.tabs.query({active: true, currentWindow: true})
// 如果标签页的url中包含百度百科的地址,就设置徽标,否则不设置徽标
if(tabs[0].url.includes("baike.baidu.com/item/")){
chrome.action.setBadgeText({ "text": "OFF" })
}
})
// 监听点击事件
chrome.action.onClicked.addListener(async (tab) => {
// 如果当前页面是百度百科的页面,就更新徽标状态,并完成聚焦模式的相关功能
if (tab.url.includes("baike.baidu.com/item/")) {
const prevState = await chrome.action.getBadgeText({ tabId: tab.id })
const nextState = prevState === "ON" ? "OFF" : "ON"
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState
})
if (nextState === "ON") {
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
// 如果当前页是菜鸟教程网站的页面,就弹出popup弹窗
else if(tab.url.includes("www.runoob.com/")){
chrome.action.setPopup({ popup: "popup/popup.html" })
}
})
tips:如果在manifest文件中配置了点击默认弹窗页面,那么action.onClicked事件将不会生效。
3、将所有的标签页的title和path展示在popup弹窗页中
交互逻辑通过popup.js实现
3.1 调用ChromeAPI查询当前浏览器窗口中的所有标签页:
// poppu.js
// 查询符合条件的所有tabs
const tabs = await chrome.tabs.query({
currentWindow: true,
url: ["https://www.runoob.com/*"]
});
...
3.2 将标签页列表插入到popup页面的元素中:
...
// 按照默认顺序对tabs列表中的元素进行排序
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));
const template = document.getElementById("li_template"); // 从页面获取模版节点
const elements = new Set();
for (const tab of tabs) {
const element = template.content.firstElementChild.cloneNode(true); // 复制模版第一个节点
const title = tab.title.split("-")[0].trim(); // 获取tab中的标题
const pathname = new URL(tab.url).pathname.slice("/docs".length); // 获取tab中的路径
element.querySelector(".title").textContent = title; // 复制出来的节点中class=“title”的子节点,写入内容
element.querySelector(".pathname").textContent = pathname; // 复制出来的节点中class=“pathname”的子节点,写入内容
element.querySelector("a").addEventListener("click", async () => { // 复制出来的节点中<a>标签子节点添加点击事件
// 点击的时候,更新对应的tab和窗口为激活状态
await chrome.tabs.update(tab.id, { active: true });
await chrome.windows.update(tab.windowId, { focused: true });
});
elements.add(element);
}
document.querySelector("ul").append(...elements);
以上代码中使用到了ChromeTabsAPI,该API 中的许多方法无需请求任何权限即可使用。但是,如果要访问标签页的标题和 URL这些敏感属性,就需要声明授权许可。如果我们请求“标签页”权限,导致所有标签页的敏感属性都有权限访问,但是由于我们仅仅管理特定网站的选项卡,因此我们请求更小范围的host权限。
host权限可以授权我们获取指定网站的敏感信息(包含title和URL),以此来缩小权限范围,进而保护用户隐私。在manifest文件中配置host权限:
{
...
"host_permissions": [
"https://www.runoob.com/*"
],
...
}
注意:如果插件中使用了tabs权限或host权限,那么用户在安装插件时都会有弹窗提示。如下图:
3.3 对标签页进行分组
该功能需要使用到ChromeTabGroupsAPI,该API将允许插件对标签组进行命名和设置颜色。同样的,要使用该API也需要在manifest文件中声明权限:
{
...
"permissions": [
...
"tabGroups"
]
...
}
3.4 实现按钮的交互
在 popup.js 中,创建一个按钮,该按钮将使用 tabs.group() 对所有选项卡进行分组并将它们移动到当前窗口中。具体代码如下:
...
const button = document.querySelector("button"); // 获取button标签
// 给button标签添加点击事件
button.addEventListener("click", async () => {
const tabIds = tabs.map(({ id }) => id); // 解构出tabs中每个对象的id属性,并组合成tabIds
const group = await chrome.tabs.group({ tabIds }); // 将tabIds新建成标签组
await chrome.tabGroups.update(groupId, { title: "菜鸟", color: "yellow" }); // 更新标签组的标题和颜色
});
如果标签页已经在分组中,则移出分组
要将标签页移出分组需要使用到ChomeTabsAPI,因此要在manifest文件中声明tabs权限:
{
...
"permissions": [
...
"tabGroups",
"tabs"
]
...
}
因为在点击按钮时需要先判断是否已经有标签组了,所以对popo.js做如下改造:
...
const button = document.querySelector("button"); // 获取添加组合的button标签
// 给button标签添加点击事件
button.addEventListener("click", async () => {
const tabGroups = await chrome.tabGroups.query({ title: "菜鸟" }) // 找到菜鸟标签组
// 如果菜鸟标签组存在,则取消标签组,否则添加菜鸟标签组
if (tabGroups.length) {
const tabs = await chrome.tabs.query({ groupId: tabGroups[0].id })
const tabIds = tabs.map(({ id }) => id)
await chrome.tabs.ungroup(tabIds)
} else {
const tabIds = tabs.map(({ id }) => id); // 解构出tabs中每个对象的id属性,并组合成tabIds
const groupId = await chrome.tabs.group({ tabIds }); // 将tabIds新建成标签组
await chrome.tabGroups.update(groupId, { title: "菜鸟", color: "yellow" }); // 更新标签组的标题和颜色
}
});
------但是在调试过程中发现,后台服务中的点击事件存在一些Bug,点击事件中如果有根据网站来判断弹哪个页面的话,第一个条件规则触发后,后面的条件规则将不会覆盖第一个条件规则。目前没有找到原因,后续再继续研究下官方文档。
参考文档:zhuanlan.zhihu.com/p/655456499
文章浏览阅读235次。想知道更多关于区块链技术知识,请百度【链客区块链技术问答社区】链客,有问必答!!区块链1.0时代:也就是比特币应用中的区块链技术,里面记录着自比特币诞生以来的所有比特币转账交易,相当于比特币网络的“数据库”。其实在区块链1.0时代,也就是比特币运用的区块链技术中已经包含了智能合约的概念,可以说智能合约的引入,使得区块链技术进化为..._学习以太坊区块链需要哪些知识
文章浏览阅读2.9k次,点赞8次,收藏21次。每天对自己多问几个为什么,总是有着想象不到的收获。 一个菜鸟小白的成长之路(copyer)前言: 这篇博客主要介绍了vuex4的基本使用,从创建一个store对象,然后再store内部的属性进行一一的解释(就是vuex的五大和核心:state, getters,mutations,actions, modules),解释主要从类型,参数等等方面的解释,还是比较的详细。内容有点长,可以收藏起来,慢慢看哟(嘻嘻)vuex介绍 Vuex 是一个专为 Vue.js 应用程序开._actiontree
文章浏览阅读192次。vue 作用域插槽的使用 <div id="app"> <cpn></cpn> <cpn> <!-- 2.获取子组件中的 pLanguage --> <template slot-scope="slot"> <!-- <span v-for="item in slot.data"_vue 插槽中内容数量
文章浏览阅读399次。go get: module github.com/go-sql-driver/mysql: Get "https://proxy.golang.org/github.com/go-sql-driver/mysql/@v/list": dial tcp 142.251.42.241:443: connectex: A connection attempt failed because the connected party did not properly respond after a period o_dial tcp 142.251.42.241:443: connectex: a connection attempt failed because
文章浏览阅读1.6k次,点赞2次,收藏3次。参考:UI页面、粒子、动画、脚本新建面板详解Laya版本:2.5.0一创建一个粒子效果在UI编辑界面右键-> 新建 -> 粒子粒子有重力模式和半径模式重力模式:粒子是一个角度向另一个方向呈发射式的粒子效果半径模式:围绕中心点为半径的旋转式粒子效果两个模式除了初始参数不同,没有什么区别。你可以创建一个重力模式粒子,然后通过调整参数,实现半径模..._laya 粒子效果
文章浏览阅读1.4k次,点赞20次,收藏18次。数据的加密解密操作在 日常网络交互中经常会用到,现在密码的安全主要在于 秘钥的安全,如论 DES 3DES AES 还是 RSA, 秘钥的算法(计算秘钥不固定) 和 保存,都决定了你的数据安全;但是常见的逆向操作 比如 hook 加密算法 都很容易拿到 秘钥; 这个时候我们可以 回溯到 之前的 古典密码学(依赖算法本身),基本思路 置换 移位 编码 等等手段 来配合 加密算法一起使用,提高我们应用的安全;
文章浏览阅读2.3k次,点赞5次,收藏9次。qml qt for android 安装apk app自动更新_qt android 更新app安装
文章浏览阅读3.9k次。浏览网站实际上是浏览网站中的网页文件。为了便于用户访问,每个站点一般都有自己的默认文档。一般情况下,默认文档都被设置为该网站的主页或某个索引页。默认文档的作用是简便用户的输入,使用户不必在浏览器中输入网站主页的文件名才能访问该网站。例如,网站www.Gench.com.cn将默认主页设置为index.htm,那么,用户在浏览器中输入www.Gench.com.cn时,IIS会自动将页面转换到默认文..._iis中【启用默认内容文档】选项中将默认打开文档修改为程序首页文件格式,如:index
文章浏览阅读5.2w次,点赞86次,收藏373次。以前对箱线图一直一知半解,这次在网上找到一篇不错的文章。首先,箱形图更多用于多组数据的比较,相对直方图不仅节省了空间,还可以展示出许多直方图不能展示的信息。单组数据则更适合采用直方图,使可视化效果更加直观。文章来源于“镝次元”公众号,在此向作者表示感谢。不会数学统计没关系——5分钟教你轻松掌握箱线图 | 图表家族#242018-01-22 19:00编辑:王艺 版面:胡曼君..._箱线图的主要用途是什么
文章浏览阅读1.2k次,点赞22次,收藏15次。每个语言都有控制流语句就不写测试代码了。arkTs绝大部分语法继承自ts,然后有些许的语法特性变化,这部分我也会在入门的时候一并记上。我之前学过java,所以这不是零基础,至少需要会一种编程语言。新建一个鸿蒙App项目,然后开一个设置按钮进行测试没有条件的话,可以在线测试编程代码。在TypeScript中所有的类型都可以被赋值为空类型null,赋值为空类型时可以和其他同类型对象进行运算,但是无法调用这个对象内部本身的方法,会报空指针异常。_鸿蒙arkts语法学
文章浏览阅读443次。试了下str, cast和convert,发现对于小数或大数,多少都存在一些问题,最后经过尝试终于找到一种满意的答案:select cast(HTJE as decimal(20,2)) from T_HTGL where ID = 1002993对于金额部分,这里设置了小数最多2位,能满足需求,尾部的0会自动去除,搞定!..._dable怎么转成varchar
文章浏览阅读569次,点赞7次,收藏6次。把原来绑在el-radio-group的事件取消调 再el-radio-button俩个上面都绑定@click.native.prevent="changeMerge(1)"一个传1 一个传2 这样就触发了。原来想的是用el-button来写,试过el-button点多少次都会触发二次确认框 但是你需求更改其样式,还要把其样式修改为el-radio-button的样式 工程量比较大 所以没深研究。1.需求是点击合并后,出来二次确认框。现在的问题是点击完出现二次确认框后,再次点击不出来二次确认框了。_el-radio-group