为Chrome开发插件提高工作效率

工作生活，什么最珍贵，我觉得是时间，怎么节约时间是一个最重要的问题，如果你有重复的工作在网页上，请接着看

 

上手步骤：

• 打开https://developer.chrome.com/extensions/getstarted，分别下载需要的文件（3个）到一个文件夹
• 打开chrome://extensions，选中开发模式，加载这个文件夹
• 浏览右方就出现一个图标，你就可以试试这个demo了

 

开发步骤：

现在可以写个自己想要的东西了

• 用喜欢的文件编辑器打开popup.html，加上自己想要的按钮，UI，标记好ID好关联点击事件
• 打开popup.js， 给相关的DOM添加点击方法

document.addEventListener('DOMContentLoaded', () => {

    var btnAdd = document.getElementById('btnAdd');
    btnAdd.addEventListener('click', () => {
        openAddPage();
    });

...

• 保存后，不需要重新加载，再次点击浏览器右上方的图标，打开你的插件，就已经加载了最新的代码，这个要给google一个赞
• 需要注意的是，插件中不可以调用原页面代码中的方法或者对象，只能选取DOM元素，然后操作像下面一样

if(document.querySelector('.button').innerText == 'Add'){document.querySelector('.button').click()};

• 问题是怎么知道你写的代码是工作的呢？如果需要不停的重试，那效率就太差了，Google已经帮你想到，答案就是，打开浏览器的调试模式（F12），切换到控制台，在里面可以直接打入代码，验证代码是否可以工作，Google是走心的
• 把调试正确后的代码合并到popup.js
• 到这里相信你已经大功造成。