chrome插件教程2-一个简单的chrome扩展 chrome插件教程2-一个简单的ch

前面我们介绍了manifest.json文件. 对于chrome扩展的目录和配置有了一个大概的概念. 我们就根据前面的chrome的manifest.json来书写一个非常简单的chrome的插件. 就是批量打开网站.
定义目录
首先, 我们根据前面的来定义一下我们的开发目录. 首先我们得有一个manifest.json. 然后我们的扩展是位于popup页面. 所以我们得有一个popup.html和popup.js. 然后我们还得有一个assets用来存放我们得图标. 有了以上的构想, 可以得到我们的初始目录结果. 如下

manifest.json popup.html popup.js assets/logo.png

这样我们就做好了我们的准备工作.
定义manifest.json
我们需要有一个popup页面. 然后我们需要有一个tab的权限用于打开网站的. 我们先声明一个简单的manifest.json. 如下

{ "manifest_version": 3, // 定义版本 "name": "CRX", // 扩展名称 "version": "1.0.0", // 版本号 "icons": { // 图标定义 "16": "assets/logo.png", "48": "assets/logo.png", "128": "assets/logo.png" }, "action": { "default_popup": "popup.html" // 定义默认的popup页面 }, "permissions": [ // 所使用的权限 "tabs" ] }

【chrome插件教程2-一个简单的chrome扩展】有了以上的东西, 我们就需要书写我们的popup页面
popup页面
我们这个页面非常简单. 只需要一个form表单和一个textarea. 加上两个button按钮就可以了. 所以大致的代码如下

Crx popup - 锐客网body{ width: 300px; height: 400px; padding: 20px; }

定义好了我们的页面.并且引入的popup.js. 然后我们在popup.js中注册onsubmit事件. 如下

document.querySelector('form').onsubmit = function () { var urls = document.querySelector('[name=urls]').valueif(!urls) { return alert('请填写链接') }urls = urls.split('\n')urls.map((url) => { if(url.indexOf('http') !== 0) { url = 'http://' + url } // 批量打开url. chrome.tabs.create({ url: url }); })return false; }

然后我们在表单的onsubmit事件中，直接提交我们的方法.
测试
打开chrome扩展程序. 或者直接输入一下url