共计 1753 个字符，预计需要花费 5 分钟才能阅读完成。
后面咱们介绍了 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. 然而曾经实现了咱们的目标了. 只须要调整页面就能够了.
最初
演示代码
正文完
