Chrome Extension 基础篇

news2024/9/23 11:27:02

Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.

扩展程序是基于 Web 技术（例如 HTML、CSS 和 JavaScript）构建的软件程序，可让用户自定义 Chrome 浏览体验。

前言

由于Manifest V3接近与Manifest V2的完全功能对等，Chrome Extension将逐步淘汰Manifest V2，作为与时俱进的前端吃瓜人，本文以Manifest V3中的概念进行介绍。

插件结构与介绍

manifest.json

manifest.json向浏览器提供有关扩展的信息，可以理解成配置文件，Chrome Extension读取配置文件开启对应功能，同时每个扩展都需要一个manifest

1.必填项1.name：插件名称2.version：版本号3.manifest_version：配置文件版本，v2 or v3

2.推荐填写1.default_locale：国际化相关2.description：对插件的描述3.icons：插件icon配置4.author：插件开发者

3.定义浏览器工具栏1."action": {"default_icon": {// optional"16": "images/icon16.png", // optional"24": "images/icon24.png", // optional"32": "images/icon32.png"// optional},"default_title": "Click Me", // optional, shown in tooltip"default_popup": "popup.html"// 1111}, 2.

4.开启后台脚本权限

 "background": {"service_worker": "background.js","type": "module" // optional 开启ES Module}

5.在网页上下文中运行的额外文件权限

 "content_scripts": [ { "matches": ["https://*.nytimes.com/*"], // <all_urls> 匹配所有链接 "css": ["my-styles.css"], "js": ["content-script.js"] }
 ]

匹配模式

6.自定义扩展程序选项

"options_ui": {"page": "options.html","open_in_tab": false
}
"options_page": "options.html"

7.开启devtools权限

"devtools_page": "devtools.html"

8.开启主题权限

developer.chrome.com/docs/extens… 文档丢了 QAQ

"chrome_url_overrides": {"newtab": "./index.html"
},

9.获取浏览器内置API

"host_permissions": ["http://*/*", "https://*/*"],
"permissions": ["tabs"],
"optional_permissions": ["downloads"],

host_permissions：允许使用扩展的域名
permissions：包含已知字符串列表中的项目
optional_permissions：与常规类似permissions，但由扩展的用户在运行时授予，而不是提前授予

Background Script

background script是扩展的事件处理程序：它包含对扩展很重要的浏览器事件的侦听器。它处于休眠状态，直到触发事件，然后执行指示的逻辑。有效的后台脚本仅在需要时加载，并在空闲时卸载。

不使用时终止，需要时重新启动（类似于事件页面）。
无权访问 DOM。（service worker独立于页面）

chrome.runtime.onInstalled.addListener(() => {chrome.contextMenus.create({"id": "sampleContextMenu","title": "Sample Context Menu","contexts": ["selection"],});
});

// This will run when a bookmark is created.
chrome.bookmarks.onCreated.addListener(() => {// do something
});

Content Script

读取或写入网页的扩展程序使用content_script。内容脚本包含在已加载到浏览器的页面上下文中执行的 JavaScript。内容脚本读取和修改浏览器访问的网页的 DOM。

content_script可以通过使用storage/message API来与扩展其他部分进行通信。

两种注入方式

1.脚本自动注入

"content_scripts": [ { "matches": ["<all_urls>"], // <all_urls> 匹配所有链接 "css": ["my-styles.css"], "js": ["content-script.js"] }
 ]

2.通过Background Script注入

// background.js
chrome.action.onClicked.addListener((tab) => {chrome.scripting.executeScript({target: { tabId: tab.id },files: ['content-script.js']});
});

UI Elements

扩展可以包含各种 HTML 文件，例如弹出窗口、选项页面和其他 HTML 页面。所有这些页面都可以访问Chrome API。

Popup Page

运行于弹窗的html显示 & js脚本

Options Page

正如扩展程序允许用户自定义 Chrome 浏览器一样，支持扩展程序的自定义。选项可用于启用功能并允许用户选择与其需求相关的功能。

两种模式

1.全页面

2.嵌入式

Devtools

DevTools 扩展的结构与任何其他扩展一样：它可以有一个背景页面、内容脚本和其他项目。此外，每个 DevTools 扩展都有一个 DevTools 页面，可以访问 DevTools API。

调式

安装

要在开发人员模式下加载解压的扩展：
- chrome://extensions通过在新选项卡中输入来转到“扩展”页面。（按照设计chrome://，URL 不可链接。）1.或者，单击扩展菜单拼图按钮并选择菜单底部的管理扩展。2.或者，点击 Chrome 菜单，将鼠标悬停在更多工具上， 然后选择扩展程序。* 单击开发者模式旁边的切换开关启用Developer Mode 。* 单击加载已解压的扩展程序按钮并选择扩展目录。1.