chrome browser 70.0.3538.80_Chrome 插件开发入门

最新推荐文章于 2024-05-21 09:42:06 发布

weixin_39611506

最新推荐文章于 2024-05-21 09:42:06 发布

阅读量327

点赞数

文章标签： chrome browser 70.0.3538.80 js chrome打印自定义纸张京东 chrome

什么是Chrome插件

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。

Chrome插件开发的技术栈是由Web技术(HTML,CSS,JS,图片等)和 Chrome 底层 API 组成；完成插件开发后编译成 .crx 压缩包发布到应用商店；插件的不同模块之间是相对独立的，模块之间的数据交互是异步通信，通信连接包含了短连接和长连接。

六大核心

1 manifest配置文件

manifest.json 是 Chrome 插件中必须的配置文件，且必须放到项目的根目录，文件中包括名字、版本、面板，权限，js 策略等配置，具体内容如下：

{  // manifest_version版本必须是2  "manifest_version": 2,  "version": "1.0.0",  "name": "插件名字",  "description": "插件功能描述",  // 设置插件的图标，分别是19，38，128  "icons": {    "19": "assets/icons/icon_19.png",    "38": "assets/icons/icon_38.png",    "128": "assets/icons/icon_128.png"  },  // 后台脚本配置  "background": {    "scripts": ["./background.js"]  },  // 右上角面板配置项  "browser_action": {    "default_popup": "./popup.html"  },  // 注入页面脚本基本配置  "content_scripts": [    {      // 表示匹配所有地址      "matches": [""],      // 多个JS按顺序注入      "js": ["./assets/js/jquery.min.js", "./contentScripts.js"],      // 注入到页面时刻，枚举值有["document_start"|"document_end"|"document_idle"]      "run_at": "document_end",      // 控制JS文件是否在匹配的Web页面中的所有框架中运行,默认false表示只在顶层框架中运行      "all_frames": true    }  ],  // 注入页面脚本安全配置  "content_security_policy": "script-src 'self' 'unsafe-eval' 'self'",  // 插件设置面板配置  "options_ui": {    "chrome_style": false,    "page": "./options.html"  },  // 开发工具扩展配置  "devtools_page": "devtools.html",  "homepage_url": "插件中的官网地址URL",  // 插件需要的访问权限  "permissions": [    "http://*/*",    "https://*/*",    "file://*/*",    "background",    "bookmarks",    "clipboardRead",    "clipboardWrite",    "contentSettings",    "cookies",    "*://*.google.com/",    "debugger"  ],  // 设置Web站点页面能够访问插件资源的列表  "web_accessible_resources": [],  // 覆盖页面  "chrome_url_overrides": {   // 覆盖新tab页面 chrome://history   "newtab": "newtab.html",   // 覆盖历史记录页面 chrome://newtab   "history": "history.html",   // 覆盖书签页面chrome://bookmarks   "bookmarks": "bookmarks.html"  }}

2 content-scripts脚本

content-scripts脚本是注入当前web页面中的 js 脚本；在 manifest.json 中的 content_scripts 节点配置；它有如下特点：

可以操作站点页面 Dom 结构；
不能访问站点中的 js 脚本；
只能访问部分 Chrome 的 API；

例如：

// 页面加载完，设置页面背景为红色$(window).on('load', () => {  $(document.body).css({    background: 'red',  })})

3 background脚本

background脚本是运行在后台的 js 脚本；在 manifest.json 中的 background 节点配置；它有如下特点：

生命周期是插件中最长的，覆盖了插件启动到结束；
除了 devtools 外可以访问大部分 chromeAPI；

常用于创建页面右键菜单、创建 omnibox 向用户提供搜索建议和抽象公共接口服务等；

// 创建右键菜单chrome.contextMenus.create({  title: '京东搜：%s', // %s表示选中的文字  contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单  onclick(params) {    chrome.tabs.create({      url: `https://search.jd.com/Search?keyword=${encodeURIComponent(        params.selectionText      )}`,    })  },})

效果：

4 browser-action弹窗

browser-action弹框是插件右上角独立操作面板；在 manifest.json 中的 browser_action 节点配置；其中 default_popup 入口是 html 文件；除了 devtools 外可以访问大部分 chromeAPI；常用于用户交互操作，如下图：

5devtools面板

官网的关系图：

扩展开发者工具，在 manifest.json 中的 devtools_page 节点配置；允许开发自定义 Elements、Console、Sources 等同级别的面板，比如 Vue Devtools 和 React Devtools；它的生命周期同开发者工具一致的；并包含了特有的 API 如下：

// 获取面板相关的APIChrome.devtools.panels// 获取审查窗口信息的APIChrome.devtools.inspectedWindow// 获取网络请求的信息Chrome.devtools.network

例如:

// devtools.jschrome.devtools.panels.elements.createSidebarPane('我的面板', sidebar => {  sidebar.setPage('../newpage.html');  sidebar.setHeight('100vh');});

// newpage.html<html lang="en">  <head>    <meta charset="UTF-8" />  head>  <body>    我是新面板  body>html>

效果：

6 options设置面板

options设置面板是插件的用户设置，在 manifest.json 中的 options_ui 节点配置；常用于让用户自定义选择想要的功能。

桌面通知

创建桌面通知，一般在 background 和 browser_action 中创建，代码如下：

chrome.notifications.create({  type: 'basic',  iconUrl: '图标地址',  title: '这是标题',  message: '这是提示内容',})

效果：

工程化

以 webpack 为例，使用 webpack 插件 webpack-extension-reloader 实现热加载，其中热加载服务端口参数 port，强加载参数 reloadPage，入口参数 entries 对应 webpack 的 entry 参数中的 key，extensionPage 是扩展的入口参数；

示例如下：

var ExtensionReloader = require('webpack-extension-reloader')new ExtensionReloader({  port: 9090,  reloadPage: true,  entries: {    background: 'background',    options: 'options',    popup: 'popup',    contentScripts: 'contentScripts',    extensionPage: [],  },})

JS权限控制表

JS 种类	可访问的 API	DOM 访问情况	JS 访问情况	是否可跨域
injectedScript	和普通 JS 无任何差别，不能访问 Chrome API	可以	可以	否
contentScript	只能访问 extension、runtime 等部分 API	可以	不可	否
popup.js	除了 devtools 外	不可	不可	是
background.js	除了 devtools 外	不可	不可	是
devtools.js	只能访问 devtools、extension、runtime 等部分 API	可以	可以	否

消息通信表

	injectedScript	contentScript	popup.js	background.js
injectedScript	-	postMessage	-	-
contentScript	postMessage	-	sendMessage 和 connect	sendMessage 和 connect
popup.js	-	sendMessage 和 connect	-	getBackgroundPage
background.js	-	sendMessage 和 connect	getViews	-
devtools.js	inspectedWindow.eval	-	sendMessage	sendMessage

weixin_39611506

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chrome browser 70.0.3538.80_Chrome 插件开发入门

什么是Chrome插件Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。Chrome插件开发的技术栈是由Web技术(HTML,CSS,JS,图片等)和 Chrome 底层 API 组成；完成插件开发后编译成 .crx 压缩包发布到应用商店；插件的不同模块之间是...
复制链接

扫一扫