前言
本文打算完成一个主动给网页增加一个看板娘的扩展，能够显现/躲藏， 而且有耐久化记载功用；根据网页的href记载是否敞开看板娘；以及鼠标选中文本呈现扩展自定义的 menu事情；如图所示：
什么是 Chrome 扩展程序？
Chrome 扩展程序（Chrome-extensions），也俗称Chrome插件，下面我简称Chrome扩展，它能够增强浏览器的功用，让用户对自己的浏览器完成定制化，DIY的快乐懂的都懂（DDDD）
怎样检查自身装置的扩展？
咱们能够通过点击 更多工具 -> 扩展程序来翻开扩展程序标签页， 在标签页中检查咱们一切装置的扩展，或许在顶部地址栏输入chrome://extensions/翻开。 如图所示：
怎样获取扩展程序？
大多数Chrome用户从Chrome 使用商铺获得扩展程序。世界各地的开发人员会在Chrome使用商铺中发布他们的扩展，通过 Chrome 的审查并最终向用户提供
-
因为一些众所周知的原因，咱们并不能访问
Chrome使用商铺， 可是Chrome又要求扩展有必要从它的Chrome使用商铺下载装置，这成了一个死循环，不过只需思想不滑坡，方法总比困难多，下面我会解说怎么从本地加载扩展， -
咱们只需在能访问的网站上extfans.com下载需求的扩展，再翻开
扩展程序标签页，翻开右上角的开发者模式开关，再把下载好的压缩包解压，解压后会看到一个.crx后缀的文件，将文件拖拽到扩展程序标签页即可。
能够点击这儿检查图文教程
开端
完成简易 demo
咱们新建一个文件夹demo，在文件夹内创立一个manifest.json装备文件：
{
// manifest的版本号，干流是2，在2024年彻底不支持，最新版本是3，
"manifest_version": 3,
// 扩展称号
"name": "看板娘",
// 扩展版本
"version": "1.0.0",
// 扩展描述
"description": "给页面加入一个看板娘，盯着你认真工作！"
}
manifest_version版本号 2 跟 3 的 API 会有较大差别；请留意区别：
点击这儿检查官方文档
扩展能够点击右上角扩展图标来弹出一个小窗口的页面，焦点脱离时窗口页面封闭，一般做一些临时性的交互操作；在装备文件中新增 icon字段，装备图标，新增 action 字段，装备 popup 弹框：
{
"manifest_version": 3,
"name": "看板娘",
"version": "1.0.0",
"description": "给页面加入一个看板娘，盯着你认真工作！",
// 图标，扩展程序列表内的图标，我悉数用一个尺度；文章最后会提供资源文件的链接
"icons": {
"16": "img/live2d.png",
"48": "img/live2d.png",
"128": "img/live2d.png"
},
// 右上角图标、可根据规矩高亮或置灰: 默许高亮
"action": {
"default_icon": "img/live2d.png",
"default_title": "这是自己开发的一个Chrome扩展",
"default_popup": "html/popup.html"
}
}
咱们创立一下popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>我是你点击出来的popup页面</h1>
</body>
</html>
提示： 咱们在
扩展程序标签页记住翻开右上角的开发者模式开关
此时；咱们在扩展程序标签页点击左上角的加载已解压的扩展程序按钮，找到咱们创立的这个demo文件夹，点击选择文件夹；扩展便成功呈现在你 扩展程序标签页中；如图所示：
提示：记住敞开卡片右下角的开关，下图第二个红框
咱们继续点击右上角的扩展程序图标，会弹出你装置的一切扩展，咱们点击第二个红框的图标；扩展便呈现在了扩展图标的左边； 如下图所示：
点击看板娘图标便呈现popup.html页面；如下图所示：
此时咱们便成功开发了一个最简略的Chrome扩展程序，接下来，咱们正式开发标题所说的看板娘扩展
完成看板娘扩展
咱们打算在页面中主动生成一个看板娘，那便需求往网页中注入生成看板娘的代码文件，这需求用到content_scriptsAPI：
{
"content_scripts": [
{
// 匹配规矩：匹配一切url
"matches": ["<all_urls>"],
// 多个js会按顺序注入
"js": ["js/live2d.min.js", "js/live2d.0.min.js", "js/init.js"],
// 代码注入的时间，可选值： "document_start", "document_end", "document_idle"
// document_idle 表明页面空闲时; 默许就是document_idle
"run_at": "document_idle"
}
]
}
-
live2d.min.js看板娘文件 1 -
live2d.0.min.js看板娘文件 2 -
init.js初始化看板娘
// init.js
live2dWidget.init({
model: {
jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json',
},
display: {
superSample: 2,
width: 300,
height: 400,
position: 'left',
hOffset: 0,
vOffset: 0,
},
})
此时，翻开恣意网页，便能在左下角看到一个心爱的看板娘了。如图所示：
下面咱们优化一下这个扩展，现在咱们只能无差别的展示看板娘，咱们想在右上角的popup.html页面上操控看板娘的显现/躲藏,而且显现/躲藏状态能够被耐久化记载；这用到了几个 API：chrome.storage.local、chrome.tabs.query、chrome.tabs.sendMessage
因为用到了chrome.storage, 所以要在 manifest.json文件中增加以下权限：
{
"permissions": ["storage"]
}
下面咱们改造一下popup.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* ... */
</style>
</head>
<body>
<h1 class="title">看板娘目录</h1>
<div class="switch-item">
<label class="switch" id="switch-live2d">
<input class="checkbox" type="checkbox" checked />
<div class="slider"></div>
</label>
<span class="text">显现/躲藏</span>
</div>
<!-- 留意只能使用外部script -->
<script src="../js/popup.js"></script>
</body>
</html>
// popup.js
const GET_LOCATION_HREF = 'get-location-href'
const TOGGLE_LIVE2D = 'toggle-live2d'
const live2dDom = document.getElementById('switch-live2d')
initLive2dStatus()
/**
* 增加change事情
*/
live2dDom.addEventListener('change', async (event) => {
const status = event.target.checked
const message = {
cmd: TOGGLE_LIVE2D,
status,
}
const { href } = await sendMessageToInitScript(message)
chrome.storage.local.set({ [href + TOGGLE_LIVE2D]: status })
})
/**
* 初始化看板娘状态
*/
async function initLive2dStatus() {
const localStorage = await chrome.storage.local.get()
const message = {
cmd: GET_LOCATION_HREF,
storage: localStorage,
}
const { href } = await sendMessageToInitScript(message)
const status = localStorage[href + TOGGLE_LIVE2D]
if (status) {
live2dDom.children[0].checked = true
} else {
live2dDom.children[0].checked = false
}
}
/**
* 发送消息到init.js
* @param {*} message
* @returns
*/
async function sendMessageToInitScript(message) {
const tabList = await chrome.tabs.query({ active: true })
const response = await chrome.tabs.sendMessage(tabList[0].id, message)
return response
}
init.js修正如下：
const GET_LOCATION_HREF = 'get-location-href'
const TOGGLE_LIVE2D = 'toggle-live2d'
/**
* @description: 初始化
*/
live2dWidget.init({
// ...
})
/**
* 鄙人一轮事情循环动作，确保DOM现已生成
*/
setTimeout(() => {
const href = location.href
const status = localStorage.getItem(href + TOGGLE_LIVE2D)
toggleLive2d(+status)
}, 0)
addListener()
/**
* 增加监听
* @returns
*/
function addListener() {
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
const { cmd, storage, status } = request
const href = location.href
if (cmd === GET_LOCATION_HREF) {
sendResponse({ href })
toggleLive2d(storage[href + TOGGLE_LIVE2D])
return
}
if (cmd === TOGGLE_LIVE2D) {
sendResponse({ href })
toggleLive2d(status)
localStorage.setItem(href + TOGGLE_LIVE2D, +status)
return
}
})
}
/**
* 开关看板娘
* @returns
*/
function toggleLive2d(status) {
const ele = document.getElementById('live2d-widget')
if (!ele) {
console.error('liveDom is undefined')
return
}
if (status) {
ele.style.display = 'block'
} else {
ele.style.display = 'none'
}
}
到这一步，带有操控开关以及记忆功用的Chrome扩展便开发完毕了！
自定义浏览器的右键菜单
接下来咱们完成一个选中文字调用百度查找的小功用，这需求用到chrome.contextMenusAPI：
-
manifest.json文件中需求敞开contextMenus权限 -
background是一个常驻的页面，它随着浏览器的翻开而翻开，随着浏览器的封闭而封闭，通常把需求一直运转的、发动就运转的、大局的代码放在background
// manifest.json
{
"permissions": ["storage", "contextMenus"],
"background": {
"service_worker": "js/background.js"
}
}
// background.js
chrome.contextMenus.create({
id: chrome.runtime.id,
title: '使用看板娘查找：%s', // %s 表明选中的文本
contexts: ['selection'], // selection 表明选中事情
})
chrome.contextMenus.onClicked.addListener((info, tab) => {
chrome.tabs.create({
url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(info.selectionText),
})
})
调试方式
| 文件类型 | 调试方式 | 图片说明 |
|---|---|---|
content_scripts |
翻开 Console,如图切换 |
 |
popup |
鼠标右键点击扩展图标，然后点击审查弹出内容 |
 |
background |
扩展办理页点击Service Worker即可 |
 |
结束
- 资源地址
- 官方文档
