关于javascript:我是如何开发第一个-chrome-插件的

本人摸鱼的时候，看盗版小说???? 发现总是弹出不可形容的广告页面，想着公共场所不适合，有啥方法能够去除广告，总不可能每次都点打消按钮，而 chorme 浏览器插件能够完满的实现这个小需要。

次要构造

chorme 浏览器插件次要就是由几个重要的文件组成：

上图其实就是这个插件，咱们能够看到其实 chorme 浏览器插件就是个页面，咱们前端上手齐全没有压力，而最重要的就是这个 manifest.json 文件。它是整个插件的配置

{
    // 清单文件的版本，这个必须写，而且必须是 2
    "manifest_version": 2,
    // 插件的名称
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件形容
    "description": "简略的 Chrome 扩大 demo",
    // 图标，个别偷懒全副用一个尺寸的也没问题
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 会始终常驻的后盾 JS 或后盾页面
    "background":
    {
        // 2 种指定形式，如果指定 JS，那么会主动生成一个背景页
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 浏览器右上角图标设置，browser_action、page_action、app 必须三选一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的题目，可选
        "default_title": "这是一个示例 Chrome 插件",
        "default_popup": "popup.html"
    },
    // 当某些特定页面关上才显示的图标
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是 pageAction",
        "default_popup": "popup.html"
    },*/
    // 须要间接注入页面的 JS
    "content_scripts": 
    [
        {// "matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 示意匹配所有地址
            "matches": ["<all_urls>"],
            // 多个 JS 按程序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS 的注入能够轻易一点，然而 CSS 的留神就要千万小心了，因为一不小心就可能影响全局款式
            "css": ["css/custom.css"],
            // 代码注入的工夫，可选值：// "document_start", "document_end",  "document_idle"，// 最初一个示意页面闲暇时，默认 document_idle
            "run_at": "document_start"
        },
        // 这里仅仅是为了演示 content-script 能够配置多个规定
        {"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 告诉
        "webRequest", // web 申请
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 能够通过 executeScript 或者 insertCSS 拜访的网站
        "https://*/*" // 能够通过 executeScript 或者 insertCSS 拜访的网站
    ],
    // 一般页面可能间接拜访的插件资源列表，如果不设置是无奈间接拜访的
    "web_accessible_resources": ["js/inject.js"],
    // 插件主页，这个很重要，不要节约了这个收费广告位
    "homepage_url": "https://www.baidu.com",
    // 笼罩浏览器默认页面
    "chrome_url_overrides":
    {
        // 笼罩浏览器默认的新标签页
        "newtab": "newtab.html"
    },
    // Chrome40 以前的插件配置页写法
    "options_page": "options.html",
    // Chrome40 当前的插件配置页写法，如果 2 个都写，新版 Chrome 只认前面这一个
    "options_ui":
    {
        "page": "options.html",
        // 增加一些默认的款式，举荐应用
        "chrome_style": true,
    // 默认值为 false，示意以嵌入形式关上 options 页面；true 示意在新的 tab 中关上 options 页面
    "open_in_tab": true
    },
    // 向地址栏注册一个关键字以提供搜寻倡议，只能设置一个关键字
    "omnibox": {"keyword" : "go"},
    // 默认语言
    "default_locale": "zh_CN",
    // devtools 页面入口，留神只能指向一个 HTML 文件，不能是 JS 文件
    "devtools_page": "devtools.html"
}

下面是 manifest.json 的一些配置信息，如果须要具体的配置信息能够查看 developer.chrome.com。但以后开发前文需要的插件时，齐全不须要这么多配置信息：

{
  "manifest_version": 2,
  "name": "book_crx",
  "version": "1.0.0",
  "description": "简略的 Chrome 扩大在线浏览小说去掉广告",
  "icons": {
    "16": "img/icon.png",
    "48": "img/icon.png",
    "128": "img/icon.png"
  },
  "background": {"scripts": ["js/main.js"]
  },
  "content_scripts": [
    {"matches": ["http://m.biqu6.cc/*"] // 对应的小说网站
    }
  ]
}

新建一个插件目录 book_ad，对应配置信息新建文件

而 main.js 就是执行代码逻辑的文件了，再次梳理需要：去掉网站中的广告，因为这里是小说网站，所以我抉择粗犷的间接去掉了页面中所有的 img 元素，代码也简略

document.addEventListener('DOMContentLoaded', function() {console.log('我被执行了！');
  Array.from(document.querySelectorAll('img')).forEach(ele => {ele.remove();
  })
});

装置

开发实现后，就是装置问题了：点击 chrome 右上角三个点 -> 更多工具 -> 扩大程序 或者 间接拜访 chrome://extensions/ 地址

开启开发者模式 后能够看到呈现三个按钮选项

点击【加载已解压扩大程序】间接加载 book_ad 目录

而后咱们就能够看看成果啦

原谅我不能放成果，会被河 * 蟹

这下摸鱼能够不受广告困扰了。

options 选项

下面实现了一个根本的插件，然而这个只能在一个小说网站下面能够应用咱们的插件，如果摸鱼摸到其余盗版小说网站时又没用了，因为以后只配置了一个网站

"content_scripts": [
    {"matches": ["http://m.biqu6.cc/*"]
    }
  ]

咱们能够配置选项页面，来动静的配置多个网站，须要在 manifest.json 文件中配置 options.html 页面

"options_page": "options.html",
"options_ui": {
    "page": "options.html",
    "chrome_style": true,
    "open_in_tab": true
},

再在根目录新建 options.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>options</title>
</head>
<body>
  <h1>options</h1>
  <input id="input" type="text" placeholder="输出网站">
  <button id="btn"> 增加 </button>
  <script src="js/options.js"></script>
</body>
</html>

而后在 chrome://extensions/ 地址中找到插件，点击刷新；点击浏览器右侧扩大程序图标能够看到【选项】，点击可跳到咱们本人写的 options.html 页面

新建 options.js

;(function(window, document){
  const S_KEY = '__book_ad__';
  document.querySelector('#btn').onclick = function() {const val = document.querySelectorAll('input')[0].value
    console.log(val)
    // 获取 background 端
    const page = chrome.extension.getBackgroundPage()
    page.getStore(S_KEY).then(site => {console.log(site)
      if (Array.isArray(site)) {site.push(val);
        page.setStore(S_KEY, site);
        alert('增加胜利!')
      } else {page.setStore(S_KEY, [val]);
        alert('增加胜利!')
      }
    })
    
  }
})(window, document)

content_scripts

content_scripts 选项是内容脚本，当配置页面加载时执行的脚本，这里把逻辑都移到 content_scripts.js 中，先要配置 manifest.json

"content_scripts": [
  {"matches": ["<all_urls>"],
    "js": ["js/content_scripts.js"],
    "run_at": "document_end"
  }
],

新建 content_scripts.js

console.log('我被执行了！');
// clearStore()
getStore('__book_ad__').then(sites => {console.log(sites);
  if (!Array.isArray(sites)) return;
  sites.forEach(site => {if (location.href.includes(site)) {main();
    }
  })
})

function main() {const $imgs = document.querySelectorAll('img');
  const $bingo = document.querySelectorAll('bingo');
  const $object = document.querySelectorAll('object');
  Array.from($imgs).forEach(ele => {ele.remove();
  })
  Array.from($bingo).forEach(ele => {ele.remove();
  })
  Array.from($object).forEach(ele => {ele.remove();
  })
}

function setStore(key, value) {
  return new Promise(resolve =>
    chrome.storage.local.set({[key]: value }, resolve)
  );
}

function getStore(key) {
  return new Promise(resolve => {chrome.storage.local.get(key, item => resolve(item[key]));
  });
}

function clearStore() {
  return new Promise(resolve => {chrome.storage.local.clear(() => resolve());
  });
}

这里咱们应用 chrome.store 来存储网址配置，应用这个选项须要在 manifest.json 文件中配置权限

  "permissions": ["storage"]

留神：chrome.storage 中存储的数据，在开发者调式工具中看不到，这里我就应用代码清理数据了。

打包

点击【打包扩大程序】按钮

选中目录打包生成 .crx 文件，不过它须要公布到谷歌利用上能力应用

总结

插件只是一个简略的应用，外面还有更多的粗疏的知识点能够帮忙插件实现更多的性能。这次又是在本人生存中，发现需要点应用技术来解决。本人前面也应用 vue 尝试从新构建了一次，源码在此。

留神：
应用 CDN 时，加载程序会弹出如下谬误

须要在 manifest.json 增加字段

"content_security_policy": "style-src'self''unsafe-inline' https://cdn.jsdelivr.net; script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self';"

欢送关注【前端学啥】一起交换