前面我们介绍了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"
]
}有了以上的东西, 我们就需要书写我们的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. 但是已经实现了我们的目的了. 只需要调整页面就可以了.
chrome
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。