Chrome插件简单开发-简单版

主要参考学习文档: 写在前面 - 《Chrome插件(扩展)开发全攻略》 - 书栈网 · BookStack

背景&诉求

观看公司的培训视频, 为了能全自动化播放, 免去手动不断操作于是想看看写点js操作下, 后来发现由于看视频的页面比较恶心, 单纯在console里写js没法比较好的实现, 于是就想到了使用浏览器插件来配合完成

实现

如图, 我写的这个, 实际上真正有效的就3个文件

• manifest.json 插件的主体介绍, 具体见文档
• page.js (content script)用于将main.js注入进DOM页面, 需要注意的是, 注入进页面的js需要在manifest.json文件中开启访问权限("web_accessible_resources": ["js/*.js"])
• main.js (injected script)由page.js注入页面后就可以通过此文件执行相关js

img里放的logo, index.html因为我的js是在页面加载就需要自动执行的, 所以也不需要干啥, 也可以自行配置点击后执行

插件图示logo及index.html页面(没用)

需要注意的是, 这个页面中不能写js, 只能引入js文件, 在js文件中事件绑定, 否则就会出错!

插件编写完成后, 进入chrome浏览器, 管理插件页, 打开开发者选项, 点击加载本地插件加载即可

插件加载后, 刷新作用页面, 就会看到我们的js加载进页面了~~ 

5种类型的JS对比 - 《Chrome插件(扩展)开发全攻略》 - 书栈网 · BookStack

JS种类	可访问的API	DOM访问情况	JS访问情况	直接跨域
injected script	和普通JS无任何差别，不能访问任何扩展API	可以访问	可以访问	不可以
content script	只能访问 extension、runtime等部分API	可以访问	不可以	不可以
popup js	可访问绝大部分API，除了devtools系列	不可直接访问	不可以	可以
background js	可访问绝大部分API，除了devtools系列	不可直接访问	不可以	可以
devtools js	只能访问 devtools、extension、runtime等部分API	可以	可以	不可以

附实际例子, 例子也没啥东西

傻逼csdn没法传附件...贴下具体代码吧

manifest.json

{
  "version": "0.0.2",
  "manifest_version": 2,
  "name": "fuuk__",
  "description": "fuuk__",
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_title": "fuuk",
    "default_popup": "index.html"
  },
  "permissions": [
    "https://www.baidu.com/*"
  ],
  "content_scripts": [
    {
        "js": ["js/jquery.js", "js/page.js"],
        "matches": [
            "https://www.baidu.com/*"
        ],
        "run_at": "document_end"
    }
  ],
  "web_accessible_resources": ["js/*.js"]
}

page.js -_-!这个也是直接粘文档里的, 稍微改了下...

$(function() {

    console.log("content script init~~~");

    function injectCustomJs(jsPath){
        console.log("injectCustomJs~~~");
        jsPath = jsPath || 'js/main.js';
        var temp = document.createElement('script');
        temp.setAttribute('type', 'text/javascript');
        temp.src = chrome.extension.getURL(jsPath);
        document.body.appendChild(temp);
    }

    injectCustomJs();
    
})

main.js 这个是自己的代码, 自己写自己的操作就行...

$(function() {
    console.log("main js init~~~");

    ///do something
});