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. Android 下Service

    1 http://www.cnblogs.com/newcj/archive/2011/05/30/2061370.html 2 http://blog.csdn.net/android_tutor/ ...

  2. Tomcat + Spring MVC + HttpClient：怎样使用PUT和PATCH方法传递数据

    在RESTful风格的API中.PUT/PATCH方法一般用于更新数据.在项目的代码中,使用的是HttpClient 4.5,是这样写的: protected JSONObject doHttpUri ...

  3. [C/C++标准库]_[0基础]_[怎样实现std::string自己的Format(sprintf)函数]

    场景: 1.  C语言有自己的sprintf函数,可是这个函数有个缺点,就是不知道须要创建多大的buffer, 这时候能够使用snprintf函数来计算大小,仅仅要參数 buffer为NULL, co ...

  4. Cocos2d-x教程(35)－三维拾取Ray-AABB碰撞检測算法

    欢迎增加Cocos2d-x 交流群:193411763 转载时请注明原文出处 :http://blog.csdn.net/u012945598/article/details/39927911 --- ...

  5. Atitit swt 4.3 4.4 4.5 新特性java attilax总结

    Atitit swt 4.3 4.4 4.5 新特性java attilax总结 1. 4.5 Release - June 3, 20151 1.1. Older Releases1 2. SWT  ...

  6. （三）spark算子 分为3大类

    ation算子通过sparkContext执行提交作业的runJob,触发rdd的DAG执行 (foreach) foreach(f) 会对rdd中的每个函数进行f操作,下面的f操作就是打印输出没有元 ...

  7. linux中查找文件并合并文件

    find ./src -name '*.txt' -exec cat '{}' \; > test.txt

  8. 篇二、理解Android Studio的视图和目录分析，这个是转载

    看不清的话可以可以将图片在新窗口中打开,以原图的大小显示.   原文链接:http://blog.csdn.net/siyehuazhilian/article/details/42123563   ...

  9. 【Python+selenium Wendriver API】之鼠标悬停事件

    # encoding=utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains import ...

  10. Oracle关于快速缓存区应用原理

    为什么oracle可以对于大量数据进行訪问时候能彰显出更加出色表现,就是通过所谓的快速缓存来实现数据的快速运算与操作.在之前的博文中我已经说过sql的运行原理,当我们訪问数据库的数据时候,首先不是从数 ...