chrome扩展-打造个性化的web页面

叁歲伎倆 2022-02-20 10:45 384阅读 0赞

今天介绍一下如何开发一款简单的chrome插件

### 1. 什么是chrome插件 ###

chrome插件也叫chrome扩展。其实chrome插件就是一个以chrome浏览器为宿主运行的一个web程序，因此chrome插件本质上就是一个web页面，只是与传统的web页面不同的是，插件是嵌入到浏览器中可与任何网站的任何web页面进行交互。也可以访问浏览器提供的内部功能。

### 2. 插件的组成部分 ###

manifest.json这个文件是必需的，相当于是一个配置文件所有的配置信息都放在这里

xxx.png图片这个是插件的图标，可以没有

popup.html html页面(文件名随意)，一般的插件安装好以后在浏览器右上角会有个插件的图标，当点击这个图标时就会弹出一个页面，页面的内容就是该html文件中定义的内容

pop.js js文件(文件名自定义)对应的js文件主要用于与其他web页面进行交互，比如想屏蔽一些网站中的广告，就可以把相关的javascript代码放在这个文件里

pop.css 样式文件主要用于设置html页面的样式，可有可无

如果需要用到jquery还可以把jquery文件引进来

以上文件放入到同一个文件夹中。

下面着重讲解一下manifest.json配置文件，如下：

manifest.json

{
    "name":"blackad",//插件名称，可随便定义
    "manifest_version":2,//manifest版本值，这个值好像必须是2而且这行代码是必须要有的，否则就会报错。
    "version":"1.0.0",//插件版本，可随意定义
    "description":"去除广告和推荐",//插件描述
    "browser_action":{
        "default_icon":"blackad.png",//插件图标
        "default_title":"blackad",//插件标题
        "default_popup":"pop.html"，//点击插件时弹出框的页面
    },
    "content_scripts":[{
        "matches":["*://*.csdn.net/*"],//对哪些网址有效，就是访问哪些网页时这个插件会起作用
        "js":["jquery-1.8.3.min.js","pop.js"]//用到的js文件列表
    }] 
    }

### 3. chrome插件的打包与安装 ###

插件的打包和安装也是非常简单。

a）在浏览器地址栏里输入chrome://extensions回车或者是点浏览器右上角的三个点->更多工具->扩展程序就会打开chrome扩展页面，这里会列出所有已安装过的插件。

b）在打开的插件页面中有个开发者模式复选框，将其勾选上，这时会多出三个按钮：

加载已解压的扩展程序：这个按钮可以直接选到存放manifest.json，js，css，html，png这些文件的文件夹，然后将插件直接安装

打包扩展程序：这按钮用来将已开发好的插件进行打包组后生成一个.crx的文件这个就是打包好的插件。注意在打包时会需要一个.pem私有秘钥文件，如果没有可以为空打包时会自动生成，但是一旦这个文件存在了就必须选上，否则无法打包

立即更新扩展程序：这个按钮用于更新升级已安装过的插件

插件的安装有两种方式：

a）将上面打包好的crx文件直接拖入到chrom扩展页面中进行安装

b）通过"加载已解压的扩展程序"按钮选择打包之前的文件夹进行安装。有时候自己开发打包的插件直接拖拽到浏览器时会提示不在插件列表中，也就是说有些版本的浏览器不支持通过拖拽的方式安装自己开发的插件。这时就可以用加载已解压的扩展程序的方式进行安装。如果只有.crx文件时，可以将后缀改为.rar解压后会得到源码文件，然后再通过这种方式安装。

### 4. 总结 ###

如果掌握了以上几点就能开发出一个简单的chrome插件了，剩下的就是js文件了，这个文件主要用于与其它web页面进行交互，所有的操作代码都可以放在这里，想怎么写就怎么写，可以随意的控制网站的样式和行为，完全根据自己所好。

当然了所有的控制和改变都只针对安装了插件的本地浏览器生效并不会影响到服务器。比如说把某网站的某些文字样式改变了这时也是只有你自己的浏览器看到的样式会变，其他人看到的还是原来的样子。

下面的js代码是用来屏蔽csdn首页和论坛回复中的广告和推荐的一段代码，有需要的大家可以拿去试一下。

pop.js

$(".J_adv").remove();
    $("div[id^='kp_box_']").remove();
    $(".post_recommand").remove();
    $(".box-box-large").remove();
    $(".box-shadow").remove();
    $("#asideFooter .aside-box").remove();
    setTimeout(function(){
        #(".J_adv").remove();
        $("div[id^='kp_box_']").remove();
        $(".post_recommand").remove();emove();
        $(".box-box-large").remove();
        $(".box-shadow").remove();
        $("#asideFooter .aside-box").remove();
    },3000);