【转】编写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扩展程序写好之后,可以发布到商城之中

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

文章来源:http://www.cnblogs.com/imwtr/p/5974325.html

时间: 2024-08-07 19:49:48

【转】编写Chrome扩展程序的相关文章

安装Chrome扩展程序xpath

最近工作用到xpath,直接从浏览器复制下来路径时常会出错而且长度很长,于是我想到之前用过的一款chrome插件,可以直接编写xpath语句,并实时出现解析出的结果,检验xpath语句是否编写正确.效果如下: 下面讲一下怎么安装xpath.第一种方法就是scientific上网后点击chrome扩展程序然后在应用商店下载.第二种方法就是今天要所讲的先在网上下载xpath,然后在chrom扩展程序中安装. 首先需要下载xpath,资源网上寻找即可,下载之后把扩展名为crx的文件的扩展名更改为zip

Axure谷歌浏览器Chrome扩展程序下载及安装方法

对于很多需要设计产品原型的朋友来说,Axure RP Pro可谓是非常方便.好用的一款软件,因为它不仅能绘制出详细的产品构思,也能生成浏览器格式的产品原型.但是如果想把原型拿给客户查看,千万记得给浏览器安装Axure扩展程序哦. Axure谷歌浏览器Chrome扩展程序使用说明:打开谷歌内核的浏览器,在浏览器中地址栏中输入chrome://extensions/  或者点击浏览器的右上角选择更多工具->扩展程序,将下载到本地的.crx文件拖入到扩展程序中,点击确定完成安装即可. 注意是拖入!!!

Chrome 扩展程序 最近历史 HistoryBar v1.1

说明 曾经用过一段时间傲游浏览器,渐渐的习惯了它的鼠标手势和一些细微的人性化的功能,比如地址栏左边的"最近访问的页面"按钮,可以方便的找到最近 20 条历史记录. 但后来由于某些原因又回到了 Chrome 的怀抱,于是就没有了这些不起眼但很好用的小功能.虽然有些扩展功能比这个强大太多,但是 Chrome 扩展装多了又会卡,尤其是功能特别多又有后台功能的,不仅卡,还有泄露隐私数据的风险.找了很久没发现有只做这种简单功能的,所以自己学习了一下 Chrome 扩展开发,花了几个小时写了这个小

Chrome 扩展程序 CrxMouse 优化版 v3.0.1

说明 CrxMouse 原版更新至 v2.7.8,跟进升级优化版至 v3.0.1. 修改说明: 1. 去除可能存在的后台数据上传隐患: 2. 解决鼠标右键拖动时的轨迹漂移问题: 3. 添加部分默认设置: 4. 修改整体配色. 解压后将 CrxMouse_Techzero_v3.0.1.crx 文件拖放至 Chrome 的 扩展程序 管理页面即可自动安装. 如果安装后被 Chrome 禁用,请参照防止 Chrome 屏蔽 非官方 扩展程序 教程使用. 下载 下载地址:http://pan.baid

【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序.对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML.CSS . Javascript 等技术来制作扩展程序. 如下图所示,这些图标就是各种开发者提供的 chrome 扩展程序: 区分扩展与插件 很多人会误称扩展程

跟我一起写一个chrome扩展程序

在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和知识的体系不断的关联,才不会忘记 学习的知识如果在现实工作中没有用到,就会淡忘它.经历要达到一定的程度,项目要达到一定的阶段 这个就是一个很简单的例子,当我们输入facebook网站,就会弹出一个弹框,然后我们输入名字,这个网站就会被我们输入的名字所代替. 这个网站换成随便什么网站都是可以的.接下来

chrome扩展程序开发之在目标页面运行自己的JS

大家都知道JS是运行在客户端的,所以,如果我们自己写一个浏览器的话,是一定可以往下载下来的网页源代码中加入js的.可惜我们没有这个能力.不过幸运的是,chrome的扩展程序可以帮我们做到这件事. Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的脚本采集程序,需要测试在网页中的运行情况,因此可以利用Chrome插件进行测试. 本文会做一个chrom

Chrome 扩展程序 最近历史 HistoryBar v1.2

简介 曾经用过一段时间傲游浏览器,渐渐的习惯了它的鼠标手势和一些细微的人性化的功能,比如地址栏左边的"最近访问的页面"按钮,可以方便的找到最近 20 条历史记录. 但后来由于某些原因又回到了 Chrome 的怀抱,于是就没有了这些不起眼但很好用的小功能.虽然有些扩展功能比这个强大太多,但是 Chrome 扩展装多了又会卡,尤其是功能特别多又有后台功能的,不仅卡,还有泄露隐私数据的风险.找了很久没发现有只做这种简单功能的,所以自己学习了一下 Chrome 扩展开发,花了几个小时写了这个小

自己写一个chrome扩展程序 - 右键菜单扩展

最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章似乎都旧了,只好回头来看官方的文档.英文呀!好些单词需要去查,于是想到划词翻译.下载几个扩展程序提示不安全!好吧,自己写一个!开放的体系就是好! 百度搜一下好多的例子,不过几乎都没说background.js是怎么放在manifest.json.大部分代码来自这里 http://www.cnblog