Chrome插件开发（书签盒子）

最新推荐文章于 2024-09-01 07:01:51 发布

Bwcx_lzp

最新推荐文章于 2024-09-01 07:01:51 发布

阅读量298

点赞数

文章标签： chrome 前端 chrome devtools

本文链接：https://blog.csdn.net/m0_49159526/article/details/133694987

版权

前言

去年写的忘记在csdn发！

在平常工作学习中，我收藏了大量的网站(自认为收藏===学会😄），建了很多书签，越来越多，现在谷歌上面一行已经满了，感觉使用有点不方便了,如下

Description

于是找时间学习了一下谷歌插件开发，干出了这个谷歌插件，方便一点管理我的收藏，支持了对谷歌插件的增删改查，在此记录一下，初版效果如下
已发布到谷歌商店（科学上网）查看地址

Description

相关知识学习

前提说明！这只是个人学习的总结记录，想要系统全面的学习，还是去看官网
地址： https://developer.chrome.com/docs/extensions/mv3/

在科学上网的前提下，大家多多少少都应该接触并使用过一些谷歌插件，比如说前端开发我会经常用到Vue.js devtools，React Developer Tools这些开发调试插件，网上一搜，也有大把的推荐插件，确实有很多实用的好插件，能提高一些效率，解决一些问题。（下面是我安装的部分插件）

Description
通过一周多空闲时间的学习，了解到了插件开发的一些知识，在此记录一下。

谷歌插件能做什么

Chrome插件提供了很多实用API供我们使用，包括但不限于：

书签控制；
下载控制；
窗口控制；
标签控制；
网络请求控制，各类事件监听；
自定义原生菜单；
完善的通信机制；
等等；

通过这些API，我们可以开发出很多各种功能的插件工具，增强浏览器的能力，给我们提供方便

如何开发一个插件

随着 Manifest V3 接近 Manifest V2 的全部功能，V2版本将逐步淘汰，下面我们直接使用V3版本，具体详情可以去谷歌官网瞅一瞅
Description

项目结构

Chrome插件没有严格的项目结构要求，插件的组成结构取决于它的功能，只要保证本目录有一个manifest.json即可，开发它也不需要专门的IDE，普通的web开发工具即可。

下面是插件包含的所有模块：
Description

Manifest：向浏览器提供关于插件的信息，例如可能使用的功能和图标、执行脚本文件等重要的文件
Service worker：插件事件处理程序，包含了浏览器事件的监听器。可以访问所有的 Chrome api：实现跨域请求、网页截屏、弹出 chrome 通知消息等功能，前提是要在 manifest.json 中声明了所需的权限
Toolbar icon：浏览器工具栏上显示的插件图标，用户可以单击图标与一个使用弹出框进行交互
UI elements：用户交互的元素，包括：上面说的点击图标和弹窗、右键菜单、地址栏搜索选择插件、快捷键唤起等，甚至还可以在页面中插入自定义组件
Content script：内容脚本，允许插件将逻辑注入页面，以读取和修改其内容
Options page：选项页面，点击插件的选项，进入的插件配置页面，可用于启用功能并允许用户选择与其需求相关的功能。

manifest.json

官网manifest配置
可以去官网看一下，每一项具体什么含义

{
  // 必须写的
  "manifest_version": 3,
  "name": "My Extension",
  "version": "versionString",

  // 推荐的
  "action": {...},
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // 可选的
  "author": ...,
  "automation": ...,
  "background": {
    // Required
    "service_worker": "background.js",
    // Optional
    "type": ...
  },
  "chrome_settings_overrides": {...},
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": {...},
  "converted_from_user_script": ...,
  "cross_origin_embedder_policy": {"value": "require-corp"},
  "cross_origin_opener_policy": {"value": "same-origin"},
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "differential_fingerprint": ...,
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "https://path/to/homepage",
  "host_permissions": [...],
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "natively_connectable": ...,
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_host_permissions": ["..."],
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "https://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

content-scripts

Content scripts

所谓content-scripts，其实就是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS，最常见的比如：广告屏蔽、页面CSS定制，等等。

content-scripts可以直接访问以下 chrome API

i18n
storage
runtime:
- connect
- getManifest
- getURL
- id
- onConnect
- onMessage
- sendMessage

background

是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS。

popup

popup就是点击插件图标以后出现的弹窗

Description

API

API有很多，这里写一下我实现这个书签插件用到的有关tabs的API，其他的见官网

获取整个标签树

chrome.bookmarks.getTree((res) => {
    console.log(res);
})

根据id获取某个节点的子树

 chrome.bookmarks.getSubTree(tree[0].children[0].children[0].id, (res) => {
     console.log(res);
 })

获取节点信息
无论是什么 get 方法，每次都是返回一个 Array 类型，即使请求的是节点，返回的也是 Array
```
chrome.bookmarks.get("5", (res) => {
     console.log(res);
 })
```

获取所有子节点

 chrome.bookmarks.getChildren("5", (res) => {
     console.log(res);
 })

获取最近创建的书签

// 最近创建的5个书签
chrome.bookmarks.getRecent(5, (res) => {
     console.log(res);
 })

搜索书签

 chrome.bookmarks.search(value, (res) => {
     console.log(res);
 })

新增书签

建一个书签，在指定的 parentId 下创建书签或文件夹。如果 url 为N ULL 或没有该字段，会创建一个文件夹

 const obj = {
     parentId: '5',
     title,
     url,
 }
 chrome.bookmarks.create(obj, (res) => {
     console.log(res);
 })

修改书签
根据id

const obj = {
    title,
    url,
}
chrome.bookmarks.update('48', obj, (res) => {
    console.log(res);
})

删除书签或空书签文件夹

chrome.bookmarks.remove('48', (res) => {
    console.log(res);
})

删除整个书签树

chrome.bookmarks.removeTree('5', (res) => {
   console.log(res);
})

获取当前网页信息
比如获取当前网页的title，url等等

chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
 console.log(tabs)  
});

书签插件实现

技术栈：react、vite、ts，ui使用了抖音的Semi Design

主要是写了popup页面，其他的，页面通讯，存储等等暂未涉及
代码放到github上，地址链接，欢迎star

最后吗，写都写了，虽然个人感觉一般，还有很多需要优化的地方，但是写都写了，发布到谷歌商店吧，后面有时间再优化，加些功能（目前发布了，待审核）
注册成为开发者，发布插件（科学上网是前提）

注册谷歌账号地址
注册成为谷歌商店开发者地址，需要交5刀，自己付不了去找某宝，啥都有
按步骤，发布地址

最后

个人能力有限，希望各位大佬多多批评建议

参考：
谷歌官方文档
 谷歌浏览器Chrome插件扩展开发教程
 来用Vite+React快速开发浏览器插件
 谷歌插件开发

Bwcx_lzp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫