wordpress+音乐网,上海seo外包,广东seo网站推广,网站如何做分布式1. 介绍
Chrome 插件可用于在谷歌浏览器上控制当前页面的一些操作#xff0c;可自主控制网页#xff0c;提升效率。
平常我们可在谷歌应用商店中下载谷歌插件来增强浏览器功能#xff0c;作为开发者#xff0c;我们也可以自己开发一个浏览器插件来配合我们的日常学习工作…1. 介绍
Chrome 插件可用于在谷歌浏览器上控制当前页面的一些操作可自主控制网页提升效率。
平常我们可在谷歌应用商店中下载谷歌插件来增强浏览器功能作为开发者我们也可以自己开发一个浏览器插件来配合我们的日常学习工作提升幸福感。
在谷歌插件开发者官网可以阅读插件开发文档来写插件插件开发主要是 JavaScript因此对前端开发者很友好
2. 快速入门
2.1 manifest.json 配置 新建一个文件夹就叫 ChromePlugin 在 ChromePlugin 根目录下新建 manifest.json 文件 manifest 文件是插件的配置文件只有在该 json 文件中增加了配置项才允许增加自定义的内容下面是常见的 json 文件配置 {manifest_version: 3,name: chromePlugin,version: 1.0.0,description: 我的第一个谷歌插件,icons: {16: ./assets/images/icon16.png,32: ./assets/images/icon32.png,48: ./assets/images/icon48.png,128: ./assets/images/icon128.png},
}基本配置 manifest_versionmanifest 的版本是谷歌针对插件开发的版本配置目前主流都是 3 版本2 版本已经停止更新name插件的名称即插件在谷歌商店以及使用时的名称version插件的版本description插件的描述信息icons描述插件图标的大小和文件路径目前提供 4 种规格的图片按照上述配置分别传入不同大小的图片即可图片地址可在根目录下创建一个 assets文件放置静态资源 其他配置可见下文中的详细解释 到这里一个 chrome 插件已经可以被加载出来了
打开谷歌浏览器输入 chrome://extensions 启用开发者模式(右上角)再点击「加载已解压的扩展程序」然后找到 ChromePlugin 这个文件夹打开便可以将这个插件加载进来了只不过当前插件没有任何功能所以也是灰色的 2.2 action 配置 在 manifest.json 中除了上述的基础配置外还可配置 actionaction 字面上意思就是我们点击右上角的插件图标时的反应比如打开一个交互面板等等。这种交互的集合就是 action。 首先先在 manifest.json 中配置 action可见官网针对 action 的配置信息action配置。 default_popup 可在点击插件图片时弹出一个弹层弹层的内容就是 default_popup 所对应的 html 文件。 {manifest_version: 3,name: chromePlugin,version: 1.0.0,description: 我的第一个谷歌插件,icons: {16: ./assets/images/icon16.png,32: ./assets/images/icon32.png,48: ./assets/images/icon48.png,128: ./assets/images/icon128.png},action: {default_title: Click Me,default_popup: ./action/index.html,default_icon: ./assets/images/icon32.png}
}可在根目录下新建一个 action 文件夹然后再创建一个 index.html 文件写一个简单的测试文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.hello {width: 100px;}/style
/head
bodydiv classhellohello simon/divscript src./index.js/script
/body
/html再次加载该插件点击插件图标可在图标下方看到一个弹层弹层显示的是 html 文件中的内容 如果想写 js 代码不能直接在 html 中创建一个 script 标签然后写代码插件中不允许 html 中有内联脚本因此需要将脚本代码作为一个单独的文件再通过 script 标签来引入
2.3 content_scripts
如果我们想给插件添加功能那就需要再配置 content_scripts(内容脚本)插件content_scripts。 不是所有的 chrome 的 api 方法都能在 content_scripts 中使用 content_scripts 的特性 可在页面打开、或页面加载结束、或者页面空闲时注入 共享页面的 dom因此脚本文件可以操作页面上的 dom JS 隔离脚本文件的 js 不会影响到页面中的 js也无法引用页面 js 中的函数或变量 content_scripts 的注入方式也有多种静态注入、动态注入、编码注入 静态注入即在 manifest.json 文件中指定 content_scripts 中的 js 文件比较常用动态注入通过 chrome.scripting.registerContentScripts 方法注入编码注入通过 chrome.scripting.executeScript 在 manifest.json 中可传入的属性
属性类型描述matches字符串数组必填指定将内容脚本注入到哪些网页css字符串数组可选要注入到匹配页面的 css 文件js字符串数组可选要注入到匹配页面的 js 文件run_atdocument_start |document_end |document_idle可选指定何时将脚本注入到网页中默认值document_idle document_idle: 页面空闲时 document_end:在dom完成之后图片等资源加载前注入脚本document_start:在dom完成前就注入脚本
在 manifest.json 中配置 content_scripts
{manifest_version: 3,name: chromePlugin,version: 1.0.0,description: 我的第一个谷歌插件,icons: {16: ./assets/images/icon16.png,32: ./assets/images/icon32.png,48: ./assets/images/icon48.png,128: ./assets/images/icon128.png},action: {default_title: Click Me,default_popup: ./action/index.html,default_icon: ./assets/images/icon32.png}, content_scripts: [{matches: [https://*/*],css: [./src/index.css],js: [./src/main.js]}]
}// 计算图片大小
function getByte(src){return fetch(src).then(function(res){return res.blob()}).then(function(data){return (data.size/(1024)).toFixed(2)kB;})
}
// 在页面上的图片的title属性上显示出来
function showInfo(el,byte){const html真实尺寸:${el.naturalWidth}*${el.naturalHeight}\n显示尺寸:${el.width}*${el.height}\n存储大小:${byte};el.titlehtml;
}
document.addEventListener(mouseover,function(e){//移动到图片元素上时、则显示信息if(e.target.tagNameIMG){getByte(e.target.src).then(byte{showInfo(e.target,byte)});}
},true)2.4 background
配置后台脚本用于处理插件的主要事件的处理后台脚本指定了属性 service_worker其实后台脚本是 Service Worker 上处理的。我们插件上的一些主要逻辑的处理都可以放到这个脚本文件中
{manifest_version: 3,name: chromePlugin,version: 1.0.0,description: 我的第一个谷歌插件,icons: {16: ./assets/images/icon16.png,32: ./assets/images/icon32.png,48: ./assets/images/icon48.png,128: ./assets/images/icon128.png},action: {default_title: Click Me,default_popup: ./action/index.html,default_icon: ./assets/images/icon32.png}, content_scripts: [{matches: [https://*/*],css: [./src/index.css],js: [./src/main.js]}],background: {service_worker: ./src/server_worker.js}
}2.5 右键菜单
当我们点击鼠标右键时可打开一个菜单其中有复制粘贴等功能插件也可以自定义右键的菜单同样需要在 manifest.json 中添加权限配置
{manifest_version: 3,name: chromePlugin,version: 1.0.0,description: 我的第一个谷歌插件,icons: {16: ./assets/images/icon16.png,32: ./assets/images/icon32.png,48: ./assets/images/icon48.png,128: ./assets/images/icon128.png},action: {default_title: Click Me,default_popup: ./action/index.html,default_icon: ./assets/images/icon32.png}, content_scripts: [{matches: [https://*/*],css: [./src/index.css],js: [./src/main.js]}],permissions: [contextMenus]
}permissions 是允许增加权限配置右键菜单就是一种权限配置开启右键菜单权限后需要再通过代码新增右键的菜单这个时候就需要用到上一步的 background 中的配置了 在 service_worker.js 文件中新增一个右键菜单可使用 chrome.contextMenus.create 方法来创建
chrome.contextMenus.create({type: normal,title: 插件的右键菜单,contexts:[all],id:menu-1
});保存后就能在右键看到一个菜单选项了 2.6 permissions
在上一步创建的右键菜单中涉及到权限设置只有在 permissions 添加了对应权限后才允许去创建菜单权限除了右键菜单外还有其他的权限权限列表常见的有
audio chrome.audio控制连接到系统的音频设备bookmarks chrome.bookmarks读取和更改书签的权限clipboardRead通过 clipboard API 读取剪切板上的数据去粘贴clipboardWrite: 通过 clipboard API 剪切内容并复制到剪切板contextMenus chrome.contextMenus 控制右键菜单的权限cookies chrome.cookies 查询和更改 cookies 的权限desktopCapture chrome.desktopCapture 截取屏幕内容的权限downloads chrome.downloads 管理下载内容的权限favicon通过 Favicon 读取网站页面的图标的权限history chrome.history 读取和更改浏览记录的权限idle chrome.idle 读取浏览器是否处于空闲状态的权限proxy chrome.proxy 管理浏览器的代理设置sidePanelchrome.sidePanel 打开侧边栏的权限storage: chrome.storage 存储、检索和跟踪用户数据的更改的权限system.cpu chrome.system.cpu查询 CPU 数据的权限system.memory chrome.system.memory获取物理内存的权限
当涉及到权限问题时就需要先在 permissions 添加了对应权限后才允许使用 chrome.xxx 再使用对应的功能。
2.7 options
options 就是选项页面可用于在插件的右键选项中进行配置跳转也可以在插件管理页面点击详情后打开插件选项当增加该配置项后选中插件再右键时会增加一个「选项」的菜单点击后会跳转到配置的页面。要展示该选项需要在 manifest.json 中配置 options_ui
{manifest_version: 3,name: chromePlugin,version: 1.0.0,description: 我的第一个谷歌插件,icons: {16: ./assets/images/icon16.png,32: ./assets/images/icon32.png,48: ./assets/images/icon48.png,128: ./assets/images/icon128.png},action: {default_title: Click Me,default_popup: ./action/index.html,default_icon: ./assets/images/icon32.png}, content_scripts: [{matches: [https://*/*],css: [./src/index.css],js: [./src/main.js]}],permissions: [contextMenus],options_page: ./options/index.html, // chrome40 之前的写法options_ui: { // chrome40 之后的写法page: ./options/index.html,chrome_style: true // 添加一些默认样式}
}!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv这是 options 点击后打开的页面/div
/body
/html3. 页面通信
在 manifest.json 中可通过不同配置来实现插件的扩展能力比如 content_scripts、background、options、actions 都有脚本文件那如何在不同的脚本文件中传递数据呢比如在 content_scripts 是在网页中运行的其中的数据如何共享给 background可以通过页面通信来传递数据。
官网文档
3.1 发送数据
// 从内容脚本 content_scripts 发送数据到扩展页面(background、options、actions)
(async () {const response await chrome.runtime.sendMessage({greeting: hello});console.log(response);
})();// 从扩展页面(background、options、actions) 发送数据到内容脚本(content_scripts)
(async () {// 需要先获取当前的tab页面const [tab] await chrome.tabs.query({active: true, lastFocusedWindow: true});const response await chrome.tabs.sendMessage(tab.id, {greeting: hello});console.log(response);
})();不同的发送方发送数据的方式也是不同的在使用时需要有所区别 3.2 接收数据
接收数据的方式是一致的都是通过 chrome.runtime.onMessage
// 接收数据
chrome.runtime.onMessage.addListener((request, sender, sendResponse) {console.log(sender.tab ?from a content script: sender.tab.url :from the extension);if (request.greeting hello)//处理完消息后、通知发送方sendResponse({farewell: goodbye});}
);
