制作chrome插件

Posted 2020-08-14 木头耕田

chrome插件制作

我一开始看网上教程的时候看的很懵，大家的chrome插件的教程都大多是给你个demo看看，看完了也不知道该怎么写自己想要的插件。

先推荐几个网址：

http://www.ituring.com.cn/article/110929  图灵社区的比较正规、可以出书的chrome插件学习文档（推荐）

http://open.chrome.360.cn/extension_dev/overview.html  360翻译的chrome插件手册（但是比较老，很久没更新）

https://developer.chrome.com/extensions （chrome自己的手册，缺点是需要FQ，一些api到这边来查比较好的）

---

 

在制作一个chrome插件过程中，manifest.json文件是非常重要的，它是chrome解读你插件需要chrome如何配合你，如何一点点实现的关键。大多教程里很少讲的很细，我这边不一定全，但是可以供参考。

做拓展插件：https://developer.chrome.com/extensions/manifest

做页面app：https://developer.chrome.com/apps/manifest

{
    "manifest_version": 2,
    "name": "哈哈哈",
    "version": "1.0",
    "description": "哈哈哈",
    "content_scripts": [
        {
            "matches": ["*://www.baidu.com/"],
            "js": ["do_something_in_baidu.js"]
        }
    ]
}

manifest大致就是上面这种样子的一个文件，然后细讲属性：

manifest_version：2             // 这个只能是2，貌似想在可用的版本就是2

name、author、book            // 应该都看得懂吧...不解释

version                               // 你插件的版本号（manifest_version、name、version是每一个manifest都必须要有的，不能缺）

default_locale                      // 默认文字，一般填en

description                          // 描述、简述

icons                                  // 一般提供16px、48px、128px三种，以对象格式声明

permission                          // 这个一般是允许什么网站通过你的插件（貌似是这个意思...错了可以帮我指出错误..）

browser_action                    // 

content_scripts                   // 属性值为数组类型，数组的每个元素可以包含matches、exclude_matches、css、js、run_at、all_frames、include_globs和exclude_blobs等属性。

                                        // 其中matches属性定义了哪些页面会被注入脚本，exclude_matches则定义了哪些页面不会被注入脚本，css和js对应要注入的样式表和javascript，run_at定义了何时进行注入，all_frames定义脚本是否会注入到嵌入式框架中，include_globs和exclude_globs则是全局URL匹配，最终脚本是否会被注入由matches、exclude_matches、include_globs和exclude_globs的值共同决定

                                        // 简单的说，如果URL匹配matches值的同时也匹配include_globs的值，会被注入；如果URL匹配exclude_matches的值或者匹配exclude_globs的值，则不会被注入。

                                        // content_scripts中的脚本只是共享页面的DOM1，而并不共享页面内嵌JavaScript的命名空间。也就是说，如果当前页面中的JavaScript有一个全局变量a，content_scripts中注入的脚本也可以有一个全局变量a，两者不会相互干扰。当然你也无法通过content_scripts访问到页面本身内嵌JavaScript的变量和函数。

 

---

 

长期更新~~~