编写Chrome扩展程序

Chrome的扩展程序很多,也很容易入门,可以来简单实现一下

看看 官方文档 或者翻译的文档:百度360,慢慢就能实现出一个扩展程序来

每个扩展程序应用一般会包含:

  • 一个manifest清单文件
  • html文件
  • js文件
  • 其他文件等

可以看到,其实结构如同一般的页面,有共通之处。

一、了解Chrome扩展程序

Chrome扩展程序商店地址为:https://chrome.google.com/webstore/category/extensions?hl=zh-CN

访问Chrome浏览器中已安装的扩展:chrome://extensions/

可以看到一些拓展程序的基本信息

一般来说,安装扩展程序可以进行在线安装的方式,但在离线环境或内网机环境下,需要安装扩展程序,要怎么办呢

crx文件

crx文件其实就是扩展程序包,可直接将其拖动到上述扩展程序列表页面,即可安装

在windows系统下,可以在以下文件路径访问相应的扩展程序

最后这个图中的文件,其实就是扩展程序的源码了

在扩展程序列表页中点击打包扩展程序,选择相应的程序目录,就可以打包出一个程序包

.crx文件就是我们要的扩展程序包了,将其拖动到页面,即可安装。 .pem是密钥文件

二、创建Chrome扩展程序

由上述知晓了扩展程序的大致信息,要创建一个扩展程序,也不外乎是创建一个项目,依据一定的规则编写逻辑后再打包安装

接下来就把之前写的简易计算器弄成一个扩展程序

看看博客园下方有几个广告,索性顺便用扩展程序移除页面上的广告吧

扩展程序需要一个manifest清单文件,提供有关应用的各种信息

{
    "manifest_version": 2,
    "name": "my-calculator",
    "description": "A simple calculator",
    "version": "0.0.1",

    "permissions": [
        "tabs",
        "http://www.cnblogs.com/"
    ],

    "browser_action": {
        "default_icon": "icons/icon_active.png",
        "default_title": "Calculate it",
        "default_popup": "calculator.html"
    },

    "content_scripts": [{
        "matches": ["*://www.cnblogs.com/*"],
        "js": ["js/jquery.js", "js/content.js"]
    }]
}

这就是需要的清单文件了,定义了程序的基本信息,这些字段的作用就自行去 文档 查看吧

文件目录结构为

计算器的代码,之前那篇文章有了,这里就不贴了

要移除博客文章下的广告,是操作页面,所以应该在content_scripts文件里操作,即这里的content.js

$('div[id^="ad_"]').each(function() {
    var $this = $(this);
    console.log('remove', $this.attr('id'));
    $this.remove();
});

记得先在manifest中配置好permissions的页面访问权限

文件已经准备完毕,现在进行程序的打包

打包方式类似上述的方法,打包成功后拖进来安装就行了

可以看到计算器已经在扩展程序之中

再看看博客文章下的广告,已经被清除了

三、发布Chrome扩展程序

自己的Chrome扩展程序写好之后,可以发布到商城之中

这篇文章 讲得挺好,就不多说了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员宝库

Linux 下各文件夹的结构说明及用途介绍

linux下各文件夹的结构说明及用途介绍: /bin:二进制可执行命令。 /dev:设备特殊文件。 /etc:系统管理和配置文件。 /etc/rc.d:启动的配...

467120
来自专栏程序员叨叨叨

Mac下MySQL忘记密码重置

在上述指令运行后,新开一个终端,同时保持原来那个终端也开着,在新的终端输入指令如下:

19130
来自专栏极乐技术社区

微信小程序开发详解《一》开发准备,开发工具使用简介,工程目录结构

一:开发准备 1、 注册微信开发者账号 登录:https://mp.weixin.qq.com/ 进行注册. 目前仅支持企业和组织等非个人注册微信小程序账号,...

29890
来自专栏程序员叨叨叨

PHP通信接口大坑集锦

最近因为毕设在搭建接口及数据库环境,使用Apache+MySQL+PHP在阿里云ECS服务器中配置,之前在本地配置过并成功实现,但是在阿里云中却频频出错,记录下...

14220
来自专栏小白课代表

我就是要在Win10中运行Win7!!!

很多时候我们使用的软件很“矫情”,有的只支持Windows10,有的对Windows7兼容性最好,尤其是课代表这种喜欢折腾,经常和各种软件打交道的人来说,只有一...

20820
来自专栏『不羁阁』 | 行走少年郎专栏

Hexo 博客部署到腾讯云教程

92160
来自专栏林德熙的博客

Roslyn 通过 nuget 统一管理信息

在日常的开发中,如果需要发布多个库,多个库之间的版权和作者等信息都是相同的。如果需要每次更改信息都打开项目进行编辑,这个效率是很低的。本文提供一个方式,通过安装...

10620
来自专栏小怪聊职场

爬虫课程(三)|Python2和Python3的比较及安装

31660
来自专栏信安之路

bWAPP 玩法总结

bWAPP(buggy web Application)是一个集成了了常见漏洞的 web 应用程序,目的是作为漏洞测试的演练场(靶机),为 web 安全爱好者和...

8.1K10
来自专栏肖洒的博客

Python-Opencv的安装

Windows下安装python2和python3双版本 Python2的Opencv的安装 Python整出的向下不兼容简直是败笔,无奈,还是要处理。 一...

68850

扫码关注云+社区

领取腾讯云代金券