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

这样我们就做好了我们的准备工作.

定义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按钮就可以了. 所以大致的代码如下

  
  
  
  
  


  

    

      
    
    

      提交
      重置
    
  

定义好了我们的页面.并且引入的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. 但是已经实现了我们的目的了. 只需要调整页面就可以了.

最后

演示代码