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. d3.js封装文本实现自动换行和旋转平移等功能

    我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMulti ...

  2. 尖峰冲击测试（spike Testing）

    与可靠性测试类似,尖峰冲击测试这种方法也是从其他行业借鉴而来.在电力工业,有一种冲击测试,用来验证设备在刚刚接通电源时能否经受住涌流的破坏.所谓涌流,通俗地说,就是电源接通瞬间,电流突然变大的现象.涌 ...

  3. 自制的React同构脚手架

    代码地址如下:http://www.demodashi.com/demo/12575.html Web前端世界日新月异变化太快,为了让自己跟上节奏不掉队,总结出了自己的一套React脚手架,方便日后新 ...

  4. Excel中判断一个表中的某一列的数据在另一列中是否存在

      A B C D 1 10   3 有 2 6   e 无 3 3   6 有 判断c列的值在A列中是否存在(假定C列为需要判断列,A列为目标列) 在D1中输入以下公式,然后下拉公式即可 =IF(C ...

  5. 当半年不碰的webpack + vuejs项目重见天日时遇到的神坑！

    半年前的Vuejs项目,由于webpack环境一直是1.0的(现在是webpack4.0),倒不是说不会升级或者不敢升级. 总而言之.在我再次启动这个项目时: npm run dev / npm ru ...

  6. iOS端App的icon和Launch Image规格实时更新

    启动影像 : iPhone :320 x 480 640 x 960 640*1136 750*1334 1242*2208  iPad :768 x 1004 1536 x 2008 APP图标: ...

  7. Away3D引擎学习笔记（二）CameraController相机控制的应用

    cameraController---相机控制器 这里针对Away3D里面封装的CameraController的区别和使用做些简单介绍.相机控制器的设计思路比较清晰,所以难点东西不多.使用方面附上源 ...

  8. Python内置函数之super()

    super(type[,object-or-type]) super()的作用在于类继承方面. 他可以实现不更改类内部代码,但是改变类的父类. 例子: 一般我们继承类的方式: >>> ...

  9. 【C#学习笔记】之用button使得textbox中数字的值增减

    代码段: string t = ""; t = mv.textBox2.Text; int n = int.Parse(t); n = n + 1; mv.textBox2.Tex ...

  10. Gradle 构建工具

    参考文章: 作者:ghui 链接:https://www.zhihu.com/question/30432152/answer/48239946 来源:知乎 著作权归作者所有.商业转载请联系作者获得授 ...