Chrome Extension 扩展程序

阅读前的说明：本文适用于之前从来没有接触过chrome extension扩展程序的同学~

编写demo

创建项目文件夹chrome_ext_demo，在项目根路径（chrome_ext_demo/）下创建 manifest.json

在manifest.json中添加如下示例（只是个简单例子，详细字段说明可参考官方文档）：

{

    "name":"Chrome Extension demo",

    "version":"1.0.0",

    "manifest_version": 2,

    "description":"Hello chrome extension.",

    "browser_action":{

        "default_icon":"icon.png",

        "default_popup":"popup.html"

    },

    "web_accessible_resources":[

        "icon.png",

        "popup.js"

    ],

    "content_scripts": [

        {

            "matches": ["*://xxx.com/xxx/*"],

            "js": ["content.js"]

        }

    ]

}

小小说明一下：

manifest_version的值必须是2，content_scripts.matches这个数组中的值表示我们希望匹配的域名，以*://baidu.com/*为例，这个表示只要域名是baidu.com，不论协议是什么，不论路径是什么，这个插件都生效~

根据web_accessible_resources和content_scripts中填写的icon.png、popup.html、popup.js、content.js文件路径得知，我们需要在chrome_ext_demo/下创建以下3个文件（PS：图片偷了下懒，随便找了一张图，不规范>.<）。

在popup.html添加如下代码：

<!DOCTYPE html>

<html>

<head>

    <style>

        body{

            width:350px;

        }

        div{

            border:1px solid #eeeaaa;

            padding:20px;

            font: 20px normal helvetica,verdana,sans-serif;

        }

    </style>

    <script src="popup.js"></script>

</head>

<body>

    <div>123</div>

</body>

</html>

在popup.js添加如下代码：

function sayHello(){

    var message = document.createTextNode("Hello chrome extension!");

    var out = document.createElement("div");

    out.appendChild(message);

    document.body.appendChild(out);

}

window.onload = sayHello;

在content.js添加如下代码：

alert('hi content!');

其中，content.js是作用在目标域名目标路径（*://xxx.com/xxx/*）下的页面上的。

运行

打开chrome浏览器，进入chrome://extensions/，打开开发者模式，点击【加载已解压的扩展程序】，选中chrome_ext_demo文件夹，引入扩展

打包

在chrome://extensions/页面上，点击【打包扩展程序】，选中我们需要打包的扩展程序根目录，点击打包即可。

demo地址

欢迎访问我的github仓库进行下载：https://github.com/silencetea/demo-market/tree/master/chrome_ext_demo

本文链接：https://www.cnblogs.com/xsilence/p/10224499.html

Chrome Extension 扩展程序 小白入门的更多相关文章

  1. 查看Chrome浏览器扩展程序源码的两种方法

    注意:仅在当前最新的版本 55.0.2883.87 m (64-bit)上测试有效 首先获取extensionId: chrome 打开扩展程序页面 chrome://extensions/ 比如我想 ...

  2. chrome常用扩展程序汇总（程序员版）

    chrome常用扩展程序之程序员版 1.chrome扩展程序 Chrome插件是一个由Web技术开发.用来增强浏览器功能的小程序,其实就是一个由HTML.CSS.JS.图片等静态资源组成的一个.crx ...

  3. 【娱乐向】制作Chrome天气预报扩展程序

    1.什么是Chrome扩展程序 Chrome扩展程序是一个用Web技术开发,用来扩展增强浏览器功能的软件.和一般的网页一样,Chrome扩展程序由html.js.css和图片等部分组成.Chrome插 ...

  4. chrome添加扩展程序

    example: chrome添加vue devtools 扩展程序 打开地址:https://chrome-extension-downloader.com/ download extension: ...

  5. 编写一个 Chrome 浏览器扩展程序

    浏览器扩展允许我们编写程序来实现对浏览器元素(书签.导航等)以及对网页元素的交互, 甚至从 web 服务器获取数据,以 Chrome 浏览器扩展为例,扩展文件包括: 一个manifest文件(主文件, ...

  6. Chrome浏览器扩展程序的本地备份

    由于众所周知的原因,有些朋友可能很难在线下载Chrome扩展程序.一种选择是可以让朋友把他成功安装的Chrome扩展程序导出成本地文件,然后让朋友发送给自己,在自己本地电脑上报这些本地文件直接拖到Ch ...

  7. 怎么下载chrome的扩展程序

    很多时候我们是没办法访问谷歌扩展应用程序 chrome应用商店的,这时候我们最好能把对应扩展应用程序下载保存,以便提供给其他人员使用. 搜索得到知乎有很全的方法: 如何导出并打包第三方chrome扩展 ...

  8. 制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站

    简单地说,浏览器插件,可以大大的扩展你的浏览器的功能.包括但不仅限于这些功能: 捕捉特定网页的内容 捕捉HTTP报文 捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为 与别的站 ...

  9. 内网使用 IPV6 之 Chrome 浏览器 扩展程序 篇

    手机端的 Google Chrome 浏览器在打开 "流量节省程序"后,它会通过 Google 的服务器中转流量,这台服务器支持 IPV4 和 IPV6.想在PC端使用类似的&qu ...

随机推荐

  1. hdu4888 多校B 最大流以及最大流唯一推断+输出方案

    题意.给一个矩阵,告诉你每行和.每列和.而且限制所填数不大于k,问矩阵是否唯一. 经典建图不说了.第一次遇到推断最大流唯一性的.学习了:用dfs来推断残网中是否还存在环,若存在,则表明绕这个环走一圈, ...

  2. Eclipse 使用 SVN 插件后改动用户方法汇总

    判定 SVN 插件是哪个 JavaH 的处理方法 SVNKit 的处理方法 工具自带改动功能 删除缓存的秘钥文件 其他发表地点 判定 SVN 插件是哪个 常见的 Eclipse SVN 插件我知道的一 ...

  3. 浅谈JavaScript变量声明提升

    前段时间阿里实习生内推,一面就被刷了,也是郁闷.今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次.官网流程显示笔试时间3月31日,时间快到了,开始刷题.网上搜了一 ...

  4. 如何进入到Docker容器内部

    启动Docker容器后,对应的服务(例如tomcat启动)也通过dockerfile文件命令运行起来了,这个时候如何进行容器内部观察容器的运行状态. 1.docker attach 这个命令在创建一个 ...

  5. c#创建对象并动态添加属性

    //动态类,可以作为基类被继承 dynamic backObj = new ExpandoObject(); //ExpandoObject 为密封类 backObj.image0 = IMGNAME ...

  6. SQL Server 中树形表数据的处理总结

    -- 使用函数的方法: --建立 演示环境 if object_id('tb_bookInfo') is not null drop table tb_bookInfo go ),type int) ...

  7. python常见面试题（一）

    1.Python是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 一.对象的引用计数机制 Python内部使用引用计数,来保持追踪内存中的对象,所有对象都 ...

  8. POJ 3252 Round Numbers 数学题解

    Description The cows, as you know, have no fingers or thumbs and thus are unable to play Scissors, P ...

  9. 前言和第一章.NET的体系结构

    前言 COM:组件对象模型(Component Object Model COM)源自对象链接和嵌入(Object Linking and Embedding )OLE. DCOM:(Distribu ...

  10. MYSQL 随机选取几条数据

    SELECT * FROM tablename AS r1 JOIN (SELECT ROUND(RAND() *(SELECT MAX(id)FROM tablename)) AS id) AS r ...