手摸手教你写个chrome插件

本文主要是介绍手摸手教你写个chrome插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

{"name": "Getting Started Example","description": "Build an Extension!","version": "1.0","manifest_version": 3,"background": {"service_worker": "background.js"},"permissions": ["storage", "activeTab", "scripting"],"action": {"default_popup": "popup.html","default_icon": {"16": "/images/get_started16.png","32": "/images/get_started32.png","48": "/images/get_started48.png","128": "/images/get_started128.png"}},"icons": {"16": "/images/get_started16.png","32": "/images/get_started32.png","48": "/images/get_started48.png","128": "/images/get_started128.png"},"options_page": "options.html"
}

配置说明

参数	说明
name	插件名称
description	插件描述
version	插件版本号
manifest_version	清单文件的版本（目前是3，按照官方的来就可以）
background	后台默认程序，版本3使用service_worker替代了之前的scripts，主要作用是管理缓存、预加载资源和启用离线网页。
permissions	需要的权限
action	toolbar扩展菜单配置
icons	插件图标（可以适配不同的尺寸）
options_page	扩展程序选项（一般是让用户自定义选择插件的某些参数值）

其中，

本次需要的permissions有：
- tabs：访问tab页；
- storage：存取缓存；
- unlimitedStorage：无限缓存。
  更多权限配置说明见官网：https://developer.chrome.com/docs/extensions/mv2/declare_permissions/#manifest
action这里我用的是清单版本2中的browser_action，版本3中的action无法弹出popup选项卡，估计是我用的姿势不太对…（有知道的童鞋可以留言告诉我怎么用~）

修改后的配置文件：

{"manifest_version": 3,"name": "阅读TODO清单","version": "1.0.0","description": "一键保存tab，轻松管理临时标签页","icons":{"16": "images/icon.png","48": "images/icon.png","128": "images/icon.png"},"browser_action":{"default_icon": "images/icon.png","default_title": "阅读清单-by 游走走","default_popup": "popup.html"},"permissions":["tabs","storage","unlimitedStorage"],"options_page": "options.html","homepage_url": "https://github.com/youzouzou/my-chrome-plugin-read-todo"
}

homepage_url：扩展程序网站，这里指向了我的github开源地址:)

实现思路

TODO清单这种小玩意儿就不多说了，简单来讲就是维护一个数组，并通过本地缓存get/set来实现增删改查。

核心代码

popup插件选项卡

讲完了配置，接下来就是我们熟悉的html/js/css三板斧了。

在popup.html里我定义了三个按钮：加入阅读清单、查看清单、加入所有打开tab。

<div id="addBtn">加入阅读清单</div>
<div id="viewBtn">查看清单</div>
<div id="addAll">加入所有打开tab</div>

监听按钮点击事件：

const addBtn = document.getElementById("addBtn")
addBtn.addEventListener("click", async () => { });

加入阅读清单

加入阅读清单是将当前tab的url和title保存到缓存数组中，这里就涉及到3个chrome的API。

获取当前tab的url和title

chrome.tabs.getSelected(null, function (tab) {console.log(tab.url, tab.title)
});

获取当前缓存的tab数组

chrome.storage.sync.get("tabs", ({ tabs }) => { });

更新缓存中的tab数组

chrome.storage.sync.set({ "tabs": newTabList });

查看清单

viewBtn.addEventListener("click", async () => {window.open(chrome.extension.getURL('list.html'));
});

这里会打开一个新的tab页，指向的是list.html文件。我在这个页面展示了缓存的tab数组，并提供了单个url打开/删除、一键全部打开/删除的功能。

加入所有打开tab

这里和加入单个tab差不多，只不过需要多调一个API来获取所有窗口的所有tab：

chrome.windows.getAll({ populate: true }, function (windows) {windows.forEach(function (window) {window.tabs.forEach(function (tab) {// 遍历到所有tab});});
});