后面咱们介绍了manifest.json文件. 对于chrome扩大的目录和配置有了一个大略的概念. 咱们就依据后面的chrome的manifest.json来书写一个非常简单的chrome的插件. 就是批量关上网站.
定义目录
首先, 咱们依据后面的来定义一下咱们的开发目录. 首先咱们得有一个manifest.json. 而后咱们的扩大是位于popup页面. 所以咱们得有一个popup.html和popup.js. 而后咱们还得有一个assets用来寄存咱们得图标. 有了以上的构想, 能够失去咱们的初始目录后果. 如下
manifest.jsonpopup.htmlpopup.jsassets/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" ]}有了以上的货色, 咱们就须要书写咱们的popup页面
popup页面
咱们这个页面非常简单. 只须要一个form表单和一个textarea. 加上两个button按钮就能够了. 所以大抵的代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Crx popup</title> <style> body{ width: 300px; height: 400px; padding: 20px; } </style></head><body> <form> <div class="form-item"> <textarea name="urls" cols="30" rows="10"></textarea> </div> <div class="button-wrapper"> <button type="submit">提交</button> <button type="reset">重置</button> </div> </form><!-- 引入popup.js --><script src="popup.js"></script></body></html>定义好了咱们的页面.并且引入的popup.js. 而后咱们在popup.js中注册onsubmit事件. 如下
document.querySelector('form').onsubmit = function () { var urls = document.querySelector('[name=urls]').value if(!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
chrome://extensions/而后加载已解压的扩大程序. 选中咱们的扩大包. 就能够了. 而后你就能够看到你的扩大程序中曾经有了一个扩大. 间接关上应用就能够了. 界面如下
尽管界面比拟lower. 然而曾经实现了咱们的目标了. 只须要调整页面就能够了.
最初
演示代码