关于chrome:chrome插件教程2一个简单的chrome扩展

后面咱们介绍了 manifest.json 文件. 对于 chrome 扩大的目录和配置有了一个大略的概念. 咱们就依据后面的 chrome 的 manifest.json 来书写一个非常简单的 chrome 的插件. 就是批量关上网站.

首先, 咱们依据后面的来定义一下咱们的开发目录. 首先咱们得有一个 manifest.json. 而后咱们的扩大是位于 popup 页面. 所以咱们得有一个 popup.html 和 popup.js. 而后咱们还得有一个 assets 用来寄存咱们得图标. 有了以上的构想, 能够失去咱们的初始目录后果. 如下

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

这样咱们就做好了咱们的筹备工作.

咱们须要有一个 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 页面

咱们这个页面非常简单. 只须要一个 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:chrome插件教程2一个简单的chrome扩展

定义目录

定义 manifest.json

popup 页面

测试

最初