如何制作一个Chrome扩展程序

合集下载

create extension 流程

create extension 流程摘要：1.创建扩展的背景和目的2.创建扩展的流程概述3.创建扩展的具体步骤4.创建扩展的注意事项5.创建扩展的实际应用案例正文：1.创建扩展的背景和目的随着互联网的发展，人们对于信息的需求日益增长，各种类型的知识、资讯、服务等都需要以一种更加高效、便捷的方式进行传播和分享。

因此，创建扩展成为了满足这一需求的有效手段之一。

创建扩展，即在已有的程序、应用或系统中增加新的功能或模块，以提升其性能、效率或满足新的需求。

在实际应用中，创建扩展可以帮助用户更好地利用已有的资源，提高工作效率，同时也为开发者提供了一种新的开发模式和盈利途径。

2.创建扩展的流程概述创建扩展的流程可以概括为以下几个步骤：（1）确定扩展的目标和功能在开始创建扩展之前，首先需要明确扩展的目标和功能，即希望在原有程序、应用或系统中实现什么样的新功能或改进。

这一步骤对于后续的开发工作至关重要，需要充分考虑用户需求、技术可行性等因素。

（2）选择合适的开发工具和语言根据扩展的目标和功能，选择合适的开发工具和语言。

常见的开发工具包括Visual Studio、Eclipse 等，开发语言包括C++、Java、Python 等。

选择合适的工具和语言，可以提高开发效率和扩展的质量。

（3）编写扩展代码根据设计文档和已有的代码，编写扩展的代码。

在编写代码时，需要遵循已有程序、应用或系统的编码规范，确保扩展的稳定性和兼容性。

（4）测试和调试扩展在编写完成后，需要对扩展进行测试和调试，以确保其功能正确、性能优良。

常见的测试方法包括单元测试、集成测试、系统测试等。

（5）发布和维护扩展在测试和调试完成后，将扩展发布给用户使用。

同时，根据用户反馈和实际应用情况，对扩展进行持续的维护和更新。

3.创建扩展的具体步骤（1）分析需求，确定扩展功能在创建扩展之前，首先需要分析需求，明确扩展的功能。

这一步骤需要充分考虑用户需求、技术可行性等因素，以确保后续的开发工作能够顺利进行。

谷歌浏览器添加多功能扩展程序

谷歌浏览器添加多功能扩展程序
使用谷歌浏览器我们会发现，如果没设主页的话，打开浏览器的界面是光秃秃的。

想让界面丰富起来，其实我们可以尝试添加一些应用程序在里面的，跟着小编一起来折腾吧~
打开谷歌浏览器:
点击右上方的“菜单”按钮，在弹出的菜单栏中点击“设置”
进入到设置界面后，我们切换至“扩展程序”这里可以看到我们并没有任何扩展程序，点击“浏览该程序库”去在线添加更多有趣多个功能的扩展程序吧：
【PS：前提是需要我们登陆自己的账号哈】
进入到程序商店，十分丰富多样的应用程序展现在我们眼前，当然我们要注意的是，有很多在中国是用不了的，比如facebook,twitter等...（除非...你懂的）
那么我们就着手搜寻一些在中国可以用到的应用程序吧。

我们以“时钟”为例，把鼠标放在上面便会弹出“添加至CHROME”的按钮，点击后会提示询问“要添加时钟吗”点击添加：
添加成功后我们再来看看原先的浏览器界面，就多出来一个扩展程序应用了。

就是这么简单~！
赶快来添加更多有意思的扩展程序吧~。

使用Vue开发自己的Chrome扩展程序过程详解

使⽤Vue开发⾃⼰的Chrome扩展程序过程详解前⾔浏览器扩展程序是可以修改和增强 Web 浏览器功能的⼩程序。

它们可⽤于各种任务，例如阻⽌⼴告，管理密码，组织标签，改变⽹页的外观和⾏为等等。

好消息是浏览器扩展并不难写。

可以⽤你已经熟悉的 Web 技术（HTML、CSS 和 JavaScript）创建 —— 就像普通⽹页⼀样。

但是与⽹页不同的是，扩展程序可以访问许多特定于浏览器的 API，这才是有趣的地⽅。

在本教程中，我将向你展⽰如何为 Chrome 构建⼀个能够改变新标签页⾏为的简单扩展。

这个扩展程序的 JavaScript 部分，我将使⽤ Vue.js 框架，因为它将允许我们快速启动并运⾏，⽽且⽤ vue ⼯作是很有趣的。

Chrome 扩展程序的基础知识Chrome扩展程序的核⼼部分是和。

manifest ⽂件采⽤JSON格式，提供有关扩展的重要信息，例如其版本、资源或所需的权限。

后台脚本允许扩展对特定的浏览器事件做出反应，例如创建新选项卡。

为了演⽰这些概念，让我们先写⼀个“Hello，World！” Chrome 扩展。

创建⼀个名为 hello-world-chrome 的新⽂件夹和两个⽂件：manifest.json 和 background.js：mkdir hello-world-chromecd hello-world-chrometouch manifest.json background.js打开 manifest.json 并添加以下代码：{"name": "Hello World Extension","version": "0.0.1","manifest_version": 2,"background": {"scripts": ["background.js"],"persistent": false}}name、version 和 manifest_version 都是必填字段。

谷歌插件 mv2的写法

谷歌插件 mv2的写法谷歌插件 mv2 是一种用于谷歌浏览器的扩展程序，提供了许多实用的功能，例如广告拦截、页面翻译等。

下面就介绍一下如何编写一个简单的 mv2 插件。

首先，我们需要一个 manifest.json 文件，用于描述插件的基本信息和权限。

一个最基本的文件内容如下：```{"manifest_version": 2,"name": "My Extension","version": "1.0","description": "A simple example extension","permissions": ["activeTab"],"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"}}```其中，manifest_version 表示插件的 manifest 版本号，这里固定为2；name 是插件的名字；version 是版本号；description 是描述信息；permissions 是插件需要的权限，例如此处需要访问当前标签页；browser_action 则用于定义插件的图标和弹出页面等信息。

接下来，我们需要一个 popup.html 文件，用于定义插件弹出的页面内容。

一个最简单的页面内容如下：```<!DOCTYPE html><html><head><title>Hello World!</title></head><body><h1>Hello World!</h1></body></html>```在 popup.html 文件中，我们可以使用 HTML、CSS 和 JavaScript 等网页技术来定义插件的弹出页面内容。

浏览器执行自定义脚本

浏览器执⾏⾃定义脚本
看到阿⾥抢⽉饼事件，突然想到如何让浏览器执⾏⾃定义的脚本，所以做了以下的测试
⾸先⾃定义er.js⽂件，代码就⼀⾏：alert('hello world');
Chrome（firefox浏览器需要下载greasemonkey 插件，使⽤⽅式和chrome类似）
1. 打开chrome扩展程序页 – chrome://extensions
2. 将刚才的⾃定义脚本保存为以user.js为后缀的 .js⽂件(⼀定是user.js后缀，不然浏览器不认，同理firefox)，拖⼊扩展程序页。

3.刷新页⾯,即可看到弹出脚本（因为没有限定，所以刷新任何页⾯，都会执⾏该扩展插件的脚本）
如果应⽤在平时，这⾥有两个问题：1、写原⽣JavaScript太多了，最好能应⽤上jquery库 2、最好能针对特定的⽹页执⾏，⽽不是所有的url 地址
这⾥就使⽤到了UserScript为执⾏脚本做限定：@require 依赖jquery地址，@include 只应⽤到百度⽹址。

举例如下。

浏览器扩展程序开发入门

chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest) chrome.i18n chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage) chrome.storage
4.2. content-scripts
所谓 content-scripts，其实就是 Chrome 插件中向页面注入脚本的一种形式（虽然名为 script，其实还可以包括 css 的），借助 content-scripts 我们可以实现通过配置的方式轻松向指定页面注入 JS 和 CSS（如果需要动态注入，可以参考下文），最常见的比如：广告屏蔽、页面 CSS 定制，等等。示例配置： { // 需要直接注入页面的 JS "content_scripts": [ { //"matches": ["http://*/*", "https://*/*"], // "<all_urls>" 表示匹配所有地址 "matches": ["<all_urls>"], // 多个 JS 按顺序注入 "js": ["js/jquery-1.8.3.js", "js/content-script.js"], // JS 的注入可以随便一点，但是 CSS 的注意就要千万小心了，因为一不小心就可能影响全局样式 "css": ["css/custom.css"], // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认 document_idle

chrome native messaging python 例子 -回复

chrome native messaging python 例子-回复Chrome Native Messaging是一种允许浏览器扩展与本地应用程序进行通信的机制。

它提供了一种安全且高效的方式，使浏览器扩展能够直接利用本地系统的功能，从而提供更好的用户体验和功能。

在本文中，我们将深入探讨Chrome Native Messaging的使用方法，并通过一个Python示例来说明它的实际应用。

1. 什么是Chrome Native Messaging？Chrome Native Messaging是一种允许Chrome浏览器扩展与本地应用程序进行双向通信的机制。

它使用一种类似于管道的方式，通过stdin和stdout在扩展和本地应用程序之间传递消息。

Native Messaging的松散耦合性使得其适用于多种编程语言，包括Python、C++等。

2. Chrome Native Messaging的优势有哪些？Chrome Native Messaging的主要优势包括：- 功能丰富：通过Native Messaging，浏览器扩展可以直接调用本地应用程序的功能，无需通过中间层或其他方式。

- 高效性：Native Messaging使用stdin和stdout传递消息，避免了使用Chrome扩展API导致的性能损失。

- 安全性：Native Messaging使用Chrome提供的密钥验证机制，确保只有合法的本地应用程序可以与扩展进行通信。

- 跨平台支持：Native Messaging支持Windows、macOS和Linux等多个操作系统平台。

3. 如何实现Chrome Native Messaging？要实现Chrome Native Messaging，我们需要进行以下步骤：- 创建一个本地应用程序：使用我们熟悉的编程语言（在本示例中为Python），编写一个可以与浏览器扩展进行通信的本地应用程序。

开发自己的Chrome浏览器扩展程序

开发自己的Chrome浏览器扩展程序随着互联网的快速发展，我们每天都离不开浏览器，而谷歌的Chrome浏览器成为了很多人的首选。

然而，我们并不满足于只是使用一个浏览器，而是希望建立一个个性化的、更高效的浏览器环境。

在这方面，开发自己的Chrome浏览器扩展程序是一个非常好的选择。

一、认识Chrome浏览器扩展程序1. Chrome浏览器扩展程序是什么？- Chrome浏览器扩展程序是一种能够为Chrome浏览器添加额外功能的插件。

它们能够修改浏览器的界面、增加新的功能或者改善现有的功能。

2. 为什么要开发自己的扩展程序？- 自己开发扩展程序可以满足个性化需求，将浏览器调整为更符合自己使用习惯的工具。

- 可以提高工作效率，为特定任务定制扩展程序，使得工作更加高效。

- 可以学习编程和开发技能，提高自己的能力。

二、开发Chrome浏览器扩展程序的基本步骤1. 编写扩展程序的基本结构- 创建一个文件夹来存放扩展程序的相关文件。

- 在文件夹中创建一个名为manifest.json的文件，这是一个必要的文件，用于描述扩展程序的相关信息。

2. 了解manifest.json文件的结构- manifest.json文件包含了扩展程序的基本信息、权限和功能等。

- 必要的字段包括"name"（扩展程序的名称）、"version"（版本号）、"manifest_version"（manifest文件的版本号）等。

- 还可以包括"permissions"（扩展程序需要的权限）、"background"（后台脚本，用于处理扩展程序的逻辑）、"browser_action"（浏览器工具栏图标及点击行为）等字段。

3. 添加扩展程序的功能- 可以使用HTML、CSS和JavaScript等技术来为扩展程序添加功能。

开发附带NPAPI插件的Chrome扩展

开发附带NPAPI插件的Chrome扩展1NPAPI插件 (2)1.1NPAPI简介 (2)1.2准备工作 (2)1.3创建插件 (2)1.3.1创建Win32 DLL工程 (2)1.3.2引入NPAPI库 (2)1.3.3添加宏定义_X86_ (2)1.3.4添加模块定义文件（.def文件） (2)1.3.5编辑stdafx.h文件 (3)1.3.6添加基础框架文件 (3)1.3.7编辑sample.cpp文件 (3)1.3.8编辑sample.h文件 (4)1.3.9添加Version资源 (8)1.3.10编译输出 (8)1.4需要注意的问题 (8)1.4.1库文件的捆绑 (8)1.4.2谨记MIMEType (8)1.4.3无效的NPN_CreateObject？ (8)2Chrome扩展 (9)2.1简介 (9)2.2开始编写 (9)2.2.1准备一个图标文件（.png） (9)2.2.2准备NPAPI插件（.dll） (9)2.2.3编写manifest.json (9)2.2.4编写background.html (10)2.2.5编写background.js (10)2.3安装与测试 (10)2.4发布 (10)3参考资料 (11)1 NPAPI插件1.1 NPAPI简介NPAPI（Netscape Plugin Application Programming Interface，网景插件应用程序接口）是网景公司当年制定的开发基于网景浏览器，用于在浏览器中执行外部应用程序的通用接口。

该接口基于插件机制，制定了一系列的标准和API，因此也有NPAPI插件一说。

同期的微软，也在IE中支持ActiveX为浏览器插件，不得不承认微软在这一点上，把浏览器和OS 结合的更为紧密，这也可能是当年微软能够击溃网景的原因之一。

但网景的影响深远，除了微软特立独行之外，其他浏览器开发厂商奇迹般的都一致采用了NPAPI来对浏览器进行扩展（这包括后来从灰烬中重生的FireFox及新生的Chrome；当然，Chrome在不久前时间已经在尝试抛弃NPAPI了）。

如何在Chrome浏览器安装第三方扩展

近日 Google 的 Chrome 浏览器宣布从最新的 Chrome 21.x 以及更高的 Chrmoe 22. x 版本开始默认只允许从 Chrome Web Store 下载安装扩展程序，而众多未登陆 Web St ore 的无论是扩展插件还是应用程序抑或 Greasemonkey 等 JS 脚本都被排除在外。

当然，按照官方给出的解释是处于安全考虑，而刚好最近被爆出的 Chrome Web Stor e 中的 Proxy Switchy Plus 汉化版等存在流氓行为也表明这项举措也无可厚非，但毕竟还是给很多使用 Greasemonkey 或 Stylish 脚本的用户造成了很大的不便，那么现在应当如何在谷歌浏览器安装 Web Store 外的第三方扩展程序呢？下面有两个方法。

1. 直接本地安装 1. 下载扩展程序/脚本程序，将其保存在本地计算机内； 2. 将保存下来的 *.crx 文件或 *.js 文件直接拖拽到浏览器的“扩展程序”（chrome://chr ome/extensions/）页面。

( 注：只有拖动到此页面才能安装，其它页面无效) 3. 按照提示安装4. 安装成功2. 开发模式安装也是先将扩展程序下载保存到本地，然后将下载来的文件后缀名 *.crx 改成 *.rar，这样你就得到了一个压缩文件，然后右键解压这个压缩文件得到一个文件夹。

然后在浏览器里打开扩展程序页面（ chrome://settings/extensions），选中右上方开发人员模式复选框，然后再点击左上方的”载入正在开发的扩展程序“按钮，选中刚刚解压出来的文件夹然后点确定即可。

3. 开启浏览器支持右击 Chrome 桌面快捷方式，选择-"属性"-"快捷方式"，然后在"目标"一栏尾部添加参数 --enable-easy-off-store-extension-install ，然后再运行浏览器就可以像以前那样正常安装 Web Store 之外的第三方扩展应用及脚本程序了。

chrome插件开发教程

chrome插件开发教程Chrome插件是一种可以在谷歌浏览器上添加功能和定制化用户体验的工具。

通过开发自己的Chrome插件，你可以为自己的需求定制独特的功能，提高工作效率，或者为其他人提供便利。

在本教程中，我们将讨论如何开发一个简单的Chrome插件。

首先，你需要确定你的插件将要实现的功能。

从Chrome浏览器的应用商店中搜索类似的插件，了解市场上已有的功能和用户反馈，以便为你的插件设定目标。

接下来，创建一个新的文件夹，作为你的插件项目的根目录。

在根目录下创建一个名为`manifest.json`的文件，这是Chrome插件的核心文件。

在`manifest.json`中，你需要定义插件的名称、版本、描述和图标等基本信息。

在`manifest.json`文件中，你还需要定义插件的权限。

这些权限将决定你的插件可以访问的Chrome浏览器的功能和信息。

例如，如果你的插件需要访问用户的浏览历史记录，你需要在`permissions`字段中添加`"history"`。

完成`manifest.json`文件后，你可以开始编写插件的核心逻辑。

这可以是一个简单的JavaScript文件，或者是一个由多个文件组成的复杂应用程序。

你可以使用HTML、CSS和JavaScript来构建插件的界面和功能。

为了测试和调试插件，你可以在Chrome浏览器的扩展程序界面打开`开发者模式`并加载你的插件。

然后，你可以通过修改代码和刷新页面来实时调试你的插件。

当你完成了插件的开发和测试后，你可以将你的插件打包为一个`.crx`文件，并提交到Chrome应用商店进行发布。

在提交插件之前，请确保你已经了解和遵守Chrome应用商店的发布规范和政策。

总结一下，开发Chrome插件可以为用户定制化浏览器功能，提高工作效率，或者为其他人提供便利。

通过编写`manifest.json`文件定义插件的基本信息和权限，以及编写JavaScript来实现插件的功能，你可以开发出自己的Chrome插件。

Chrome插件开发示例

Chrome插件开发⽰例前⾔我们常称的 Chrome 插件（Chrome Extension）是指 Chrome 扩展程序，它的作⽤是增强浏览器功能。

通常在Chrome商店中下载的扩展是.crx后缀的压缩包，安装插件可以以压缩包形式安装，当你开启开发者模式的时候，也可以加载已解压的扩展程序，即⾄少包含⼀个manifest.json⽂件和⼀个 html 或者 js ⽂件的的⽂件夹。

Chrome插件提供了很多实⽤API供我们使⽤，包括但不限于：书签控制、下载控制、窗⼝控制、标签控制、⽹络请求控制，各类事件监听、⾃定义原⽣菜单、完善的通信机制等。

本⽂多图预警Talk is cheap. Show me the code.⼀、⼀个最简单的 Chrome 扩展的组成⽰例此⽰例由⼀个manifest.json⽂件和html⽂件和⼀个png图⽚⽂件组成，是⼀个git 提交的emoji速查⼯具，功能⾮常的简单，就是点击弹出⼀个html页⾯（下图），以达到速查的⽬的，html⾥可以替换成任何你想要的内容。

下载这份代码，在 Chrome ⾥的扩展程序⾥打开开发者模式，加载已解压的扩展程序即可体验manifest.json 基本配置{"manifest_version": 2, // 必填⽤整数表⽰manifest⽂件⾃⾝格式的版本号。

从Chrome 18开始，manifest_version就是2了"name": "git commit emoji速查", // 必填⽤来标识扩展的简短纯⽂本。

这个⽂字将出现在安装对话框，扩展管理界⾯，和store⾥⾯"description": "git commit emoji对照表", // 描述扩种的⼀段字符串（不能是html或者其他格式，不能超过132个字符）"version": "1.0.0", // 必填"browser_action": { // ⼀个 browser action 可以拥有⼀个图标，⼀个tooltip，⼀个badge和⼀个popup。

Chromium扩展(Extension)的页面(Page)加载过程分析

Chromium扩展（Extension）的页面（Page）加载过程分析Chromium的Extension Page其实就是网页，因此它们的加载过程与普通网页相同。

常见的Extension Page有Background Page和Popup Page。

其中，Background Page在浏览器窗口初始化完成后自动加载，之后运行在后台中。

Popup Page在用户点击地址栏右边的按钮时加载，并且显示在弹窗中。

本文接下来就分析Extension Page的加载过程。

Extension Page是加载在Extension Process中的，如图1所示：Extension Process实际上就是Render Process。

Chromium的Content层向外提供了一个WebContents类，通过调用这个类的静态成员函数Create就可以在一个Extension Process加载一个指定的Extension Page。

Background Page是一个特殊的网页，它的内容是空的，不过包含有一个background.js。

这个background.js是在Extension的清单文件中指定的。

Popup Page则与普通网页是一样的，它既可以包含有UI元素，也可以包含JavaScript脚本。

接下来，我们就结合源代码，先分析Background Page的加载过程，再分析Popup Page 的加载过程。

Chromium的chrome模块会创建一个ChromeNotificationObserver对象，用来监听每一个新打开的浏览器窗口的NOTIFICATION_BROWSER_WINDOW_READY事件。

这时候上述ChromeNotificationObserver对象的成员函数OnBrowserWindowReady会被调用，如下所示：[cpp] view plain copy 在CODE上查看代码片派生到我的代码片void ChromeNotificationObserver::OnBrowserWindowReady(Browser* browser) {Profile* profile = browser->profile();......extensions::ProcessManager* manager =ExtensionSystem::Get(profile)->process_manager();......manager->OnBrowserWindowReady();......}这个函数定义在文件external/chromium_org/chrome/browser/extensions/chrome_notification_中。

Google的扩展程序

下面是个人认为非常好用的几个谷歌浏览器Google Chrome扩展程序（extensions）。

好长时间没用Google Chrome（谷歌浏览器）, 因为老是有各种各样的毛病，而且不能像Firefox那样找到称心的扩展。

今天心血来潮，装了Chrome 5.0.396，发现原来可以放弃Firefox了。

AdBlock- 非常经典的广告过滤程序。

可以自定义黑名单和白名单。

Chrowety - 谷歌浏览器的推特客户端，感觉和Firefox的twitterfox类似，可以自定义API 以及显示效果，非常好用。

Click&Clean–一键清除Chrome浏览历史等网络痕迹.
Docs PDF/PowerPoint Viewer（由Google 提供）- 在Google 文档查看器中自动预览PDF 文件、PowerPoint 演示文稿和其它文档。

IE Tab–用Chorme标签中用IE浏览网页，非常有用哦
Minimize Chrome to tray–将Chrome 最小化到系统托盘.
My Shortcuts–可以自定义网址的快捷方式，一键打开、新建Gmail, google docs等，支持自定义。

One Number–自动检查GMail, Google Reader, Google Voice, and Google Wave新消息，显示数量.
Proxy Switchy!–非常方便和快捷地管理和切换代理，非常好用。

有道词典Chrome划词插件–支持Chrome浏览器的划词翻译
迅雷、快车、旋风专用链自动破解–自动把页面里的迅雷,快车Flashget,旋风链接替换为真实地址,使用你自己喜欢的下载方式来下载.。

使用网站扩展工具(如Wordress插件或Chrome扩展程序)增强网站功能和用户体验的方法和推荐

使用网站扩展工具（如Wordress插件或Chrome扩展程序）增强网站功能和用户体验的方法和推荐使用网站扩展工具（如WordPress插件或Chrome扩展程序）增强网站功能和用户体验的方法和推荐随着互联网的不断发展，网站已经成为了许多企事业单位以及个人展示自身形象、推广产品和服务的重要渠道。

为了有竞争力地吸引和留住用户，提供优质的用户体验和功能是至关重要的。

而使用网站扩展工具是实现这一目标的有效途径。

本文将介绍一些常见的网站扩展工具，并分享一些方法和推荐，以帮助您增强网站的功能和用户体验。

一、WordPress插件的使用1. SEO优化插件：SEO是网站优化的重要环节，可以帮助提升网站在搜索引擎中的排名。

推荐使用WordPress插件中的Yoast SEO或Allin One SEO Pack等来优化网站的标题、描述、关键词等元数据，还可以进行网页内容的分析和优化建议。

2. 社交分享插件：社交媒体的影响力越来越大，通过添加社交分享插件，用户可以方便地将网站内容分享至各大社交平台，扩大网站的曝光和传播。

推荐使用WordPress插件中的Social Warfare或AddThis等插件。

3. 缓存插件：高速加载是用户体验的重要因素之一。

使用缓存插件可以将网站的静态文件缓存到用户的本地，加快网站的加载速度。

推荐使用WordPress插件中的WP Super Cache或W3 Total Cache等插件。

二、Chrome扩展程序的使用1. AdBlock Plus：广告屏蔽插件可以有效地阻止网页中的广告内容，提升用户浏览网站的体验。

AdBlock Plus是一款功能强大的广告屏蔽插件，可以自由地选择屏蔽广告的范围。

2. LastPass：密码管理是保护用户账户安全的重要环节。

LastPass是一款密码管理器，可以安全地储存和自动填充各类密码，避免用户因为繁琐的密码操作而影响网站使用体验。

3. Honey：Honey是一款自动搜索优惠券的插件，在用户进行网上购物时，它会自动搜索并提供可使用的优惠券，帮助用户节省更多的金钱。

在Chrome浏览器中管理插件和扩展程序

在Chrome浏览器中管理插件和扩展程序第一章：插件和扩展程序的作用及安装方式Chrome浏览器作为全球最受欢迎的浏览器之一，其强大的扩展程序和插件功能为用户提供了更多的个性化体验和功能拓展。

插件和扩展程序可以增加浏览器的功能，包括增强网页浏览、提高工作效率、改善隐私和安全等。

在Chrome浏览器中，可以通过多种方式来安装插件和扩展程序。

插件和扩展程序可以通过Chrome网上应用商店来安装。

只需在Chrome浏览器中输入 "chrome://extensions/"，进入扩展页面，点击左上角的 "打开Chrome Web Store"，即可进入应用商店。

在应用商店中，用户可根据需求搜索插件和扩展程序，并点击 "添加至Chrome" 安装使用。

第二章：插件和扩展程序管理的基本方法Chrome浏览器提供了简单方便的管理方式，使用户可以灵活控制插件和扩展程序的安装和卸载。

在 "chrome://extensions/" 页面，用户可以看到已安装的插件和扩展程序的列表，并可以对其进行相关操作。

对于已安装的插件和扩展程序，用户可以通过开关按钮来启用或禁用它们。

在该页面中，用户还可以对插件和扩展程序进行更新和删除操作。

为了更好地管理已安装的插件和扩展程序，用户还可以使用分组功能，将其按类别进行整理。

第三章：常用的插件和扩展程序推荐Chrome浏览器拥有众多的插件和扩展程序，涵盖了各个领域的需求。

以下介绍几款常用的插件和扩展程序，以供参考。

1. AdBlock Plus：广告拦截器，可自动屏蔽网页中的广告，提供更清爽的浏览体验。

2. Grammarly：拼写和语法检查工具，在写作过程中帮助用户纠正拼写和语法错误。

3. LastPass：密码管理工具，可以存储和管理用户的各类密码，提供方便的自动登录功能。

4. Pocket：稍后阅读工具，可以将感兴趣的文章保存到个人阅读列表，随时阅读。

如何使用Chrome浏览器，打包生成自己的插件（crx格式文件）？

如何使⽤Chrome浏览器，打包⽣成⾃⼰的插件（crx格式⽂件）？chrome extension，⽂件扩展名为crx，俗称chrome扩展，chrome插件。

crx⽂件本质就是ZIP⽂件，只是⾕歌在ZIP⽂件头，插⼊了⾃定义的私有字段，如，插件描述，插件ID，密钥等。

⽤户可以⼿动修改crx⽂件的扩展名，修改为zip，然后使⽤普通的解压⼯具，就能解压。

开发者提交⾃⼰的插件时，提交的是⽂件就是压缩包zip⽂件。

⽽⾕歌后台，则根据压缩包，⾃动⽣成crx⽂件。

注意：chrome依靠插件ID，⽽不是插件名字，判断是否为同⼀个插件。

开发者提交插件更新时，即使修改产品名称，也不会影响⽤户的插件升级。

上⾯属于背景知识，题外话，下⾯回到正题。

———————————我不是分割线—————————————————如何打包⽣成⾃⼰的插件呢？打开插件管理页⾯(chrome://extensions/)。

点击右上⾓的“开发者模式”按钮后，再点击“打包扩展程序”，就会弹出“打包扩展程序”对话框。

废话不说，⼀图胜万⾔。

根据提⽰，选择扩展程序根⽬录，就会⽣成crx⽂件了。

这⾥有⼀个问题，如果是第⼀次⽣成CRX⽂件，Chrome会在其根⽬录下⽣成⼀个pem密钥⽂件。

举个栗⼦：你有⼀个扩展程序，⽂件名为MyFirstExtension，那么扩展程序根⽬录为：F:\Project\MyFirstExtension那么⽣成的⽂件路径就是：F:\Project\MyFirstExtension.crx，F:\Project\MyFirstExtension.pem。

那么问题来了，pem密钥⽂件有何⽤处呢？很简单，⽤于⽣成插件ID，区分插件的。

假设，你当前插件叫做MyFirstExtension，版本号为1.0，⽽下⼀次升级时，你想把产品名称改为MySecondExtension,版本号为2.0。

但，如何保证Chrome认为它们是⼀款插件呢？这个时候，就需要pem密钥⽂件了，再次⽣成crx⽂件时，选择pem⽂件。

教你如何使用Chrome安装非官方扩展程序

教你如何使⽤Chrome安装⾮官⽅扩展程序Google Chrome，⼜称 Google 浏览器，是⼀个由 Google（⾕歌）公司开发的⽹页浏览器。

该浏览器是基于其他开源软件所撰写，包括 WebKit，⽬标是提升稳定性、速度和安全性，并创造出简单且有效率的使⽤者界⾯。

软件的名称是来⾃于称作Chrome 的⽹络浏览器图形使⽤者界⾯（GUI）。

软件的 beta 测试版本在 2008 年 9 ⽉ 2 ⽇发布，提供 50 种语⾔版本，有Windows、Mac OS X、Linux、Android、iOS 以及 Windows Phone 版本提供下载。

2013 年 9 ⽉，Chrome 已达全球份额的43%，成为使⽤最⼴的浏览器。

⽽ Chrome 的⼴泛使⽤不仅仅是因为浏览器本⾝的功能（虽然它⾮常优秀），还有很⼤的⼀部分是⽀持“扩展程序”的原因。

Chrome 的扩展程序⼀般要从 Google 的 Chrome⽹上应⽤店在线安装，如果要离线安装扩展程序就要下载以“.crx”为后缀名的⽂件，然后打开扩展程序页⾯，将 .crx ⽂件拖放到 Chrome 窗⼝上安装。

但是⾃从 Chrome 33 发布以后，Google 为了安全考虑开始禁⽌使⽤离线安装的插件，⼀拖进去就被直接禁⽤了，还⽆法⼿动启⽤。

所以很多“优化版”、“破解版”的扩展程序都⽆法直接安装使⽤了。

但是还有两种⽅法可以离线安装扩展程序并且可以不被 Chrome 屏蔽，以下是具体⽅法：⼀、通过开发者模式加载扩展程序1. 将下载的 .crx ⽂件后缀名改为 .zip；2. 将修改后的⽂件解压到⼀个新的⽂件夹，名字随意，最好是扩展程序名的英⽂或拼⾳，便于区分；3. 打开 Chrome，转到扩展程序页⾯，找到右上⾓的“开发者模式”，勾选；4. 点击第⼆⾏的“加载正在开发的扩展程序…”,选择刚刚解压到的⽂件夹，点击确定；5. 安装完成，设置好就可以使⽤了。

6. 每次重新打开 Chrome 时会提醒是否禁⽤以开发者模式运⾏的扩展程序，点击取消，就可以⼀直使⽤了。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

• 每个扩展程序最多只能有一个“background page”
• 后台网页是一个 HTML 页面（也可以只是一个脚本），在扩展程序的进程中运行，整个生命周期中都存在。
• 主要用于管理浏览器本身的事务或状态。如监听点击扩展图标事件，监听右键点击相应菜单，创建菜单，更换图标，对popup页面的请求做出相应等
浏览器扩展程序可以用来干什么？
• 当浏览器无法完成你想做的事，或者网站本身功能存在局限时。你不妨考虑自己做个扩展来帮助你。
• 情景1：读英文网页的时候有的单词不认识，有的句子不会翻译，又不想打开翻译软件一个个查。（某些浏览器并不自带翻译功能）
• 情景2：访问网站时总会弹出各种广告，关都关不掉。（浏览器没有屏蔽广告的功能） • 情景3：嫌某个网页的背景太丑了，我想自己给他设置一个背景。（该网站没有为用户提供背景风格切换功能）
Lofter 标签批量添加器网页元素模糊工具
Lofter标签批量添加器
每添加一个标签需要点击1次，加满标签需要点击10次
将标签分类打包存放，选中类别名称，则把相应标签批量加入标签框
Lofter标签管理页：Options Page
网页元素模糊工具
• 在不想让他人看到的隐私信息上点击右键，选择“模糊处理”，这样就产生了模糊效果，这样可以直接截图保存。避免了使用画笔工具的二次涂抹。
Popup page（弹出内容）
• 点击浏览器右上角的扩展图标时，有时会弹出一个页面，这是HTML页面，是 default_popup设置的。如果该参数为空，则默认不弹出页面。 • 我们可以通过这个页面进行扩展程序的设置，或者查看扩展的工作状态。
Content Scripts（内容脚本）
• 内容脚本是在网页的上下文中运行的 JavaScript 文件，它们可以通过标准的文档对象模型（DOM）来获取浏览器访问的网页详情，或者作出更改。
• 遇到以上问题，你不必忍气吞声，现有的一键翻译扩展程序，广告屏蔽插件（扩展程序）等均可以解决。
用户如何使用扩展程序？
DefaultБайду номын сангаасpopup Context Menus
Options page
开始制作你自己的扩展程序！
• 试着去构思一个插件 • 选中网页中的文字，右键直接查看谷歌翻译(后面有相应的实例) • 你需要掌握的知识 • HTML, JavaScript, CSS • 你需要参考的文档 • 官方的是C面：Popup Page
THANKS
DESIGN BY:@Charry
"background": { "scripts": ["background.js"] }, "content_scripts": [ { "matches": ["/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"] }
CHROME EXTENSION 谷歌浏览器扩展程序
在看PPT之前教你区分“插件”与“扩展程序”
• 插件对应的是“Plugin”，扩展对应的是“Extension”，所以它俩背后其实是两个完全不同的词。
• 插件并不会增加浏览器自身的功能，可调用操作系统的API，并且不同操作系统的插件一般不能混用。我们经常遇到的插件有：Flash插件、PDF插件、Java插件等等。 • 相比较之下，扩展则可以增加浏览器本身的功能，也可以调用浏览器的API，并且同一个浏览器的扩展一般也都是可以跨操作系统使用的。 • PS:其实多数人平时并没有区分这两个词，包括我自己
Idea
Knowledge
To do it
扩展程序文件目录分析
谷歌翻译
迅雷下载插件
多功能翻译
manifest.json（清单文件）
{
"manifest_version": 2, "name": "我的应用", "version": "版本字符串", "icons": {...}, "browser_action": { "default_icon": {
• 换句话说，Content Scripts可以直接操控用户打开的网页。可以对其DOM作任何操作，但是由于它与网页自带的脚本文件处于不同环境下。所以不能对用户网页的方法和变量进行访问。
一个简单的实例
自动转跳
文件目录和manifest参数
Background Page Code
我的工作
插件
vs
扩展程序
什么是浏览器扩展程序？
• Google Chrome Extensions are browser extensions that modify the Google Chrome browser. These extensions are written using web technologies like HTML, JavaScript, and CSS. • 通俗的讲，浏览器扩展程序就是一个通过调用浏览器API实现扩展浏览器功能的小程序。但这又不是我们通常讲的可执行程序。它其实就是一个文件包，直接加载到浏览器里面就可以工作。
},
background, default_popup, content_scripts消息传递
Page Action Browser Action Content Scripts
Popup page, Option page, Etc.
Background Page
Background（后台页面）
"19": "images/icon19.png",
"38": "images/icon38.png" }, "default_title": "Google Mail",
],
"options_page": "aFile.html", "permissions": [...], }
"default_popup": "popup.html"