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. 那些奇妙的&quot;大师&quot;是怎样炼成的（科学、迷信、心理）

    近期王林大师从神坛上掉下来直接掉进了监狱,有关他的非常多神话也相同被撕下了. 事实上这类奇妙的大师在地球上非常多,美国的非常多"邪教"头目,国内的邪教头目都属于这一类.国内比較轰动 ...

  2. iOS项目开发之仿网易彩票推荐应用

    简介 效果展示 思路分析 代码实现 Git地址 一.简介 某些公司有较多的产品时,通常会在一个产品中推广另外的一些产品,我简单的封装了一个UIControllerView,由于不同公司,要求不同.所以 ...

  3. 两个页面js方法兼容

    1. a.js页面 //Js获取Url参数 function request(paras) { var url = location.href; var paraString = url.substr ...

  4. Iterating elements using NightWatchJS

    1) used the following strategy to iterate over DOM elements using Nightwatch: // Executing a functio ...

  5. hdu 5348 MZL&#39;s endless loop

    给一个无向图(事实上是有向的.可是没有指定边的方向),你须要指定边的方向,使得每一个点入度和出度相差不超过1. 事实上就是找很多条路径.合起来能走完这个图..先统计各个顶点的度.度为奇数必是起点或终点 ...

  6. css 猫头鹰选择器

    除了第一个以外的兄弟选择器.由于看起来像猫头鹰,也叫猫头鹰选择器 .TD-Breadcrumb > li + li:before { padding: 0 5px; color: #ccc; c ...

  7. 征信报告页面的input验证收集

    https://ipcrs.pbccrc.org.cn/ function checkLoginName() { var loginName = $.trim($("#loginname&q ...

  8. spring源码解析之IOC容器（二）------加载和注册

    上一篇跟踪了IOC容器对配置文件的定位,现在我们继续跟踪代码,看看IOC容器是怎么加载和注册配置文件中的信息的.开始之前,首先我们先来了解一下IOC容器所使用的数据结构-------BeanDefin ...

  9. Spring Boot 如何在类中应用配置文件

    如何在类中应用配置文件 优先级: 当前目录子目录的/config > 当前目录 > classpath的/config包 > classpath的根目录 即:越靠近的优先级越高 ** ...

  10. 不同手机根据坐标计算控件、图片的像素，px 与 dp, sp换算公式？

    参考该帖子:http://www.cnblogs.com/bluestorm/p/3640786.html PPI = Pixels per inch,每英寸上的像素数,即 "像素密度&qu ...