chrome扩展开发——自动填表实例

手把手教你开发chrome扩展

手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单Chrome的更新速度可以说前无古人，现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。

界面清爽、操作人性化、网络备份资料和快速的启动速度令我爱不释手，还有它拥有众多的扩展程序，相对于firefox的插件来说，数量上和质量上稍显不足，但相信chrome将会很快在扩展上超越firefox，firefox上内存占用上实在不令人满意，也许我使用firefox的一个原因就是因为firebug，不过相信chrome平台的类firebug插件也会很快出现。

Chrome的扩展开发十分简单，我们只需要掌握web开发的htm+CSS+Javascript，就能很快开发出自己的扩展。

你需要了解的内容在开发前首先要掌握一些基础知识。

1、Chrome扩展文件Chrome扩展文件以.crx为后缀名，在Google Chrome扩展官方网站下载扩展时，Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安装完成或者取消安装，该文件就会被删除。

.crx实际上是一个压缩文件，使用解压文件打开这个文件就可以看到其中的文件目录，下图中是“关灯看视频”扩展的截图：因此可以认为，我们实际上就是写一个Web应用，然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。

2、Browser Actions（扩展图标）把Browser Actions翻译成扩展图标不是很准确，但它的功能就是把你的应用显示在Chrome工具栏上。

我们在上面看到一个文件manifest.json，就是使用这个文件来把相应的图标和其他参数注册到Browser Actions。

使用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 都是必填字段。

基于chrome浏览器插件扩展开发-本科毕业论文

基于chrome浏览器插件扩展开发-本科毕业论文基于chrome浏览器插件扩展开发摘要Chrome浏览器高安全性的沙盒技术、多进程技术、隐身模式、快速高效的浏览体验吸引了大量用户。

Chrome扩展可以提升用户体验，乃至解决一些使用过程中遇到的实际问题。

本文介绍Chrome浏览器的进程与线程模型解析，对浏览器的框架也做出了一定的分析。

Chrome浏览器基于HTML的扩展开发方式极大地方便了开发人员。

本文是一显示图片和文字为例的chrome浏览器插件扩展开发，介绍了Chrome扩展的开发流程，并结合Ajax技术增强了特性。

扩展插件增加了浏览器的功能，使得浏览器趋向便捷，个性化。

扩展插件的开发也必定成为各大浏览器厂商竞争的方向，了解和编写插件扩展显得十分必要。

本文首先介绍了插件扩展开发的相关辅助知识，这对于chrome浏览器的扩展插件的开发具有指导意义，然后着重介绍了chrome浏览器的框架和插件的机构使得插件的开发原理清晰明了，最后介绍了运用Ajax技术的插件实例和解决插件开发过程中面临的一些常见问题的讲解。

本文的简单研究chrome浏览器的插件开发，有助于初学者的学习。

关键字：chrome 浏览器；插件； AjaxBased on the chrome browser plug-inextension developmentAbstractChrome Browser security sandbox technology, process technology, more stealth mode,fast and efficient browsing experience attracts a large number of users.Chrome extensions can enhance the user experience,and solve some practical problems encountered during use.This article describes the process and thread Model Analysis of the chrome browser,the browser frame is also made some analysis.Extension of the chrome browser is based on HTML development mode greatly simplifies developer.This is a display image and text,for example chrome browser plug-inextension Development,introduced the chrome extension development process,and AJAX technologies with enhanced features.Extensions in crease the capabilities of the browser,making his bangs. This article first describes theplug-inextensions related to the development of secondary knowledge,the development of extensions for chrome browser with a guide,and then focus on the framework of the chrome browser and plug-in makes it easy to develop the structure of the principle of clarity,and finally describes the plug-in instance by using AJAX technology,and solve some of the frequently asked questions about plugin development process.Study on the simple chrome browser plug-in development of this article,helps beginners learn.Keywords：chrome browser ；pulg-inextentsion ；Ajax目录1 绪论 (5)1.1 本文研究目的 (5)1.2 Chrome浏览器扩展插件与实现技术 (6)1.3 本文主要内容 (7)2 浏览器发展与现状 (9)2.1浏览器简介 (9)2.2 浏览器发展历程 (9)2.3 浏览器分类 (11)2.4 chrome浏览器简介 (12)2.5 插件开发 (13)3 插件开发环境 (15)3.1 为什么是chrome浏览器 (15)3.2 chrome插件开发环境 (16)4 开发语言简介 (18)4.1 java script语言 (18)4.2 HTML语言 (20)5 Chrome的详解与插件结构 (23)5.1 chrome浏览器 (23)5.2 chrome浏览器的特点[15] (23)5.2.1高速程序启动快，载入网页快 (23)5.2.2简单高效、易用性的设计 (24)5.2.3样式 (24)5.2.4多进程及多线程模型 (24)5.2.5搜索简洁 (24)5.3 chrome浏览器内核 (25)5.4 chrome的进程与线程模型 (26)5.4.1chrome的进程和线程模型[16] (26)5.5 chrome线程模型 (30)5.6 chrome插件结构[17] (31)5.6.1插件组成 (31)5.6.2 manifest.json文件 (32)5.6.3浏览器插件结构 (34)5.7 小结 (36)6.3 插件制作 (40)6.3 插件安装步骤 (43)6.4 小结 (46)7 Chrome浏览器插件开发相关问题 (48)7.1 如何输出和查看调试信息 (48)7.2 Chrome插件开发中文问题解决方法 (48)7.3 如何在execute script多个content script文件[19] (49)7.4 插件是否提交 (50)7.5小结 (50)8 结论 (52)8.1 工作总结 (52)8.2 论文展望 (53)参考文献 (54)附录 (56)致谢 (60)1 绪论本文对论文涉及的研究领域进行了较为详细的综述。

Google Chrome扩展开发指南

Google Chrome插件开发Google Chrome扩展是一种软件，以增强Chrome浏览器的功能。

Google Chrome扩展使用HTML、JavaScript、CSS和图片等Web技术开发。

Google Chrome扩展至少包括一个manifest.json和一个js文件manifest.json是插件调度的大本营，声明各种资源的名字js文件中定义要执行的操作可以通过如下的方式直接访问Google Chrome扩展中的文件：chrome-extension://<extensionID>/<pathToFile>extensionID，可以通过chrome://extensions的URL查看。

在开发过程中extensionID经常变化，可以使用@@extension_id替代；一旦打包部署就成为永久extensionID。

Google Chrome扩展往往包含一个不可见的background page，Google Chrome扩展的主要业务逻辑都位于此。

有两种类型的background page，一种是persistent background pages，另一种是event pages。

Persistent background pages总是可见，而Event pages事件驱动是否可见。

Event pages根据需要加载。

在manifest.json文中注册Event page如下：{"background": {"scripts": [myEventPage.js],"persistent": false]}Google Chrome扩展的可视UI（二选一）browser actions，Google Chrome扩展适用于任何页面。

图标往往位于浏览器地址栏外右侧。

page actions，Google Chrome扩展只作用于某一页面，当打开该页面时出现Google Chrome扩展，关闭该页面则Google Chrome扩展也随之消失。

教你设置Chrome里的自动填表功能

教你设置Chrome里的自动填表功能
大家在进行网络购物或者一些网站注册时，往往需要填写收货的地址以及信用卡的支付信息，如果每次都要填写这些信息，显然会非常复杂，并且可能因为没有记住而去再次查询确认身份的信息等。

通过谷歌Chrome 浏览器里的自动填充功能，我们在填写这些这些表单时，就会非常方便，这也是谷歌Chrome浏览器里的一大特色，而且在IE 浏览器和 Firefox 里也没有内置这个功能。

今天我们给大家分享的就是如何设置或开启 Chrome 自动填充功能的方法，只需一次设置，填表永远方便。

启动 Chrome 浏览器，然后点击右上角的扳手图标—>选项。

在选项页面中选择“个人资料”；
勾选“自动填充”中的“启用自动填充功能后，只需点击一次即可填写多个网络表单”复选框；
点击“管理自动填充设置”，分别点击“添加新地址”和“添加新信用卡”，预设好这些数据。

完成之后，点击确定。

现在，你已经设置完成了你的自动填充信息，当下一次填写在线表单的时候，就可以一键填写所有表单了。

使用ClojureScript进行chrome扩展开发

使⽤ClojureScript 进⾏chrome 扩展开发使⽤ClojureScript 进⾏chrome 扩展开发⽬录1 简介学习使⽤ClojureScript ，使⽤库，进⾏chrome 扩展开发。

chrome 只是包装了chrome 扩展的api,并把回调模型包装成事件模型，具体参考chromex 的指南。

基础的chrome 扩展开发知识参考，基本概念写的很清楚。

⼀个chrome 扩展主要由background 、popup 、content-script 三个独⽴的部分组成。

通过mainfest.json 对扩展进⾏配置。

扩展页⾯之间的通信参考。

ClojureScript 是编译⽬标为JavaScript 的clojure 实现。

主要学习下和JS 的互操作。

⽰例扩展的⽬的是实现的剧集更新监控，发现有新的剧集，则给出提醒，并提供下载地址,popup界⾯如下：图1 追剧提醒的popup 界⾯2 项⽬配置添加相应依赖项, ClojureScript 编译管理使⽤代替lein figwheel ，popup 界⾯使⽤reagent 实现,dom 操作使⽤dommy 库。

代码1 project.clj代码2 background 配置项: background.cljs.edn (defproject movmon "0.1.0-SNAPSHOT":dependencies [[org.clojure /clojure "1.10.1"][org.clojure /clojurescript "1.10.520"][org.clojure /core.async "0.4.500"][binaryage /chromex "0.8.4"][binaryage /devtools "0.9.10"][prismatic /dommy "1.1.0"][cljs-ajax "0.8.0"][binaryage /oops "0.7.0"][reagent "0.9.0-rc4"];;[com.bhauman/figwheel-main "0.2.3"];;[com.bhauman/rebel-readline-cljs "0.1.4"][environ "1.1.0"]]:plugins [[lein-cljsbuild "1.1.7":exclusions [[org.clojure /clojure ]]][lein-shell "0.5.0"][lein-environ "1.1.0"][lein-cooper "1.2.2"]]:source-paths ["src/background""src/popup""resources"]:clean-targets ^{:protect false } ["target""resources/unpacked/compiled""resources/release/compiled"]:profiles {:dev{:dependencies [[cider /piggieback "0.4.2"][com.bhauman /figwheel-main "0.2.3"][com.bhauman /rebel-readline-cljs "0.1.4"]]:repl-options {:nrepl-middleware [cider.piggieback /wrap-cljs-repl ]}}:release{:env {:chromex-elide-verbose-logging "true"}:cljsbuild {:builds{:background{:source-paths ["src/background"]:compiler {:output-to "resources/release/compiled/background.js":output-dir "resources/release/compiled/background":asset-path "compiled/background":main movmon.background:optimizations :advanced:elide-asserts true }}:popup{:source-paths ["src/popup"]:compiler {:output-to "resources/release/compiled/popup.js":output-dir "resources/release/compiled/popup":asset-path "compiled/popup":main movmon.popup:optimizations :advanced:elide-asserts true }}}}}}:aliases {"fig-main" ["trampoline" "run" "-m" "figwheel.main" "-bb" "popup" "-b" "background" "-r"]"release" ["with-profile" "+release" "do"["clean"]["cljsbuild" "once" "background" "popup"]]})代码3 popup 配置项: popup.cljs.edn由于不需要修改打开的⽹页，因此不需要content-script 。

开发自己的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等技术来为扩展程序添加功能。

前端开发技术表单自动填充实现方法

前端开发技术表单自动填充实现方法在如今的数字时代，表单是我们日常生活和工作中不可或缺的一部分。

从注册新账户到填写调查问卷，我们经常需要填写各种表单。

然而，频繁的输入相同的信息，例如姓名、地址和联系方式，可能会变得繁琐而耗时。

为了提高用户的体验和效率，前端开发技术中的表单自动填充功能应运而生。

它可以记住并自动填充先前输入过的数据，免去了重复输入的麻烦。

在本文中，我们将介绍几种前端开发技术实现表单自动填充的方法。

一、使用浏览器自动填充功能现代浏览器通常都具有内置的自动填充功能，可以根据用户以前在相似表单中输入的内容自动填充表单。

这种方法具有简单易用的优势，用户只需选择浏览器提供的填充选项即可。

但是，使用浏览器自动填充功能可能会受到浏览器兼容性的限制，不同的浏览器可能有不同的实现方式。

二、使用LocalStorage或SessionStorageLocalStorage和SessionStorage是HTML5中新增的两种客户端存储方式，可以用于在浏览器本地存储数据。

我们可以将用户先前输入的表单数据存储在LocalStorage或SessionStorage中，并在下次打开页面时从中获取数据来自动填充表单。

这种方法相对简单，但需要注意保护用户的隐私，确保存储的数据不被恶意获取或滥用。

三、使用cookiecookie是一种在用户计算机上存储小型文本文件的技术。

通过将用户的表单数据存储在cookie中，我们可以在用户下一次访问页面时自动填充表单。

与LocalStorage或SessionStorage相比，cookie具有更广泛的兼容性，但也需要注意保护用户的隐私。

四、使用框架或插件许多前端开发框架和插件提供了表单自动填充的功能。

例如，使用React.js可以轻松实现表单自动填充，通过state或props将表单数据传递给组件，使其自动填充表单。

类似地，Vue.js和Angular等框架也提供了类似的功能。

Chrome浏览器扩展开发系列之十九：扩展开发示例

Chrome浏览器扩展开发系列之⼗九：扩展开发⽰例翻译总结了这么多的官⽹内容，下⾯以⼀款博主开发的“沪深股票价格变化实时追踪提醒”软件为例，介绍Chrome浏览器扩展程序的开发，开发环境为Eclipse IDE+Chrome Browser。

“沪深股票价格变化实时追踪提醒”软件能够实时获取⽤户指定的股票的价格等参数，并根据⽤户设置的价格区间进⾏越界提醒。

该软件⽬前只实现了两部分，⼀个是options页⾯，⽤以配置⽤户要监听的股票及股票的价格区间。

另⼀个是browser action类型的popup页⾯，供⽤户查看股票当前价格，并通过图标的Badge 实现价格越界提醒。

⾸先在Eclipse中创建JavaScript项⽬。

在JavaScript项⽬所在的⽬录下分别创建_locales、css、html、img和js⼦⽬录，并创建manifest.json⽂件。

在_locales⽬录下创建zh_CN⼦⽬录，在zh_CN⼦⽬录下创建messages.json⽂件，⽀持中⽂的国际化。

将必要的CSS⽂件复制到css⽬录下。

将必要的PNG⽂件复制到img⽬录下。

在html⽬录下创建options.html和popup.html⽂件。

HTML页⾯⾮常简单，只给出了HTML基本元素结构，引⼊了必要的CSS和JS。

页⾯的具体内容都是由JS根据读取的数据动态⽣成的。

在js⽬录下创建如下JS⽂件:constants.js定义全局常量background.js定义数据操作逻辑，包括启动时的初始化和运⾏时的读写逻辑storage.js定义数据存储逻辑，通过chrome.storage.sync API实现持久化数据的真正读写options.js定义options.html页⾯的内容popup.js定义popup.html页⾯的内容utils.js定义通⽤的JS函数jquery-min.js第三⽅jQuery类库manifest.json⽂件内容：1 {2 "manifest_version": 2,34 "name": "__MSG_extension_name__",5 "description": "__MSG_extension_description__",6 "version": "1.0",78 "default_locale": "zh_CN",910 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",1112 "background": {13 "scripts": ["js/shanghaiA.js", "js/shanghaiB.js", "js/shenzhenA.js", "js/shenzhenB.js", "js/shenzhenC.js", "js/shenzhenJ.js", "js/constants.js", "js/utils.js", "js/background.js", "js/storage.js"],14 "persistent": true15 },1617 "permissions": [18 "notifications",19 "storage",20 "<all_urls>"//由于要通过Web Services调⽤获取股票的实时信息，此处必须有此项21 ],2223 "options_page": "html/options.html",24 "options_ui": {25 "page": "html/options.html",26 "chrome_style": true,27 "open_in_tab": false28 },2930 "browser_action": {31 "default_icon": {32 "38": "img/vos128.png",33 "19": "img/vos48.png"34 },35 "default_title": "__MSG_extension_browser_action_default_title__",36 "default_popup": "html/popup.html"37 }38 }数据结构：1//object name saved in chrome storage23var VOG_LOG = "VOSTOCK";45//object data saved in chrome storage67var VOG_LOG_DATA = {89 dataVersion: 3, //当前版本1011 products: [], //⽤户监听的股票，⽤户可以通过options页⾯配置，其中包括股票的基本信息和⽤户的期望范围1213 interval: 5, //股票信息更新时间间隔，默认5秒1415 notification: false//是否开通Notification通知，默认不开通1617 };options页⾯⽰例：popup页⾯⽰例：上图中，提⽰股票价格达到了期望上限。

javascript实现自动填写表单实例简析

javascript实现⾃动填写表单实例简析本⽂实例讲述了javascript实现⾃动填写表单的⽅法。

分享给⼤家供⼤家参考，具体如下：在平时开发过程中，或者在访问某些站点，经常要频繁地填写⼀⼤堆表单时，我们可以利⽤javascript，写⼀段脚本，预先把要填的信息准备好，然后模拟点击按钮的动作，⾃动提交表单，轻松且⾼效。

步骤1. 找到页⾯中对应的form，把form中所需的html控件列出来，如<form name="customersForm" id="myform" method="POST" action="insert.php"><b> 姓 : </b> <input type="text" name="thisFnameField" size="20" value=""><b> 名 : </b> <input type="text" name="thisLnameField" size="20" value=""><b> 公司 : </b> <input type="text" name="thisCompanyField" size="20" value=""><b> 地址 : </b> <input type="text" name="thisAddressField" size="20" value=""></form>2.编写js代码复制代码代码如下:javascript:customersForm.thisFnameField.value = "张";customersForm.thisLnameField.value ="三";customersForm.thisCompanyField.value = "公司";customersForm.thisAddressField.value = "中国";customersForm.submit.focus();3.第三步最重要，因为前2步稍微有点js知识的⼈都会写这么简单的代码。

chrome浏览器批量自动化安装扩展：ExternalExtensions

chrome浏览器批量⾃动化安装扩展：ExternalExtensions 应⽤场景：
1. 跟桌⾯应⽤捆绑的扩展：例如Evernote有个Chrome扩展，可以实现安装Evernote时同时为Chrome安装这个扩展；
2. ⽹络管理员为内⽹中所有机器预装某个扩展。

⼤致原理：
在Chrome配置中填⼊对扩展的描述，在windows中是修改注册表，在Mac/Linux中是Chrome数据⽬录中的⽂件；
Mac/Linux下的描述⽂件类似这样的json：
复制代码
代码如下:
{
"external_update_url": "/mytestextension/updates.xml",
"supported_locales": [ "en", "fr", "de" ]
}
其中supported_locales⽤来指定为哪些locale(语⾔环境)的Chrome安装这个扩展。

Windows中的情况类似，只是把json的字段以注册表的形式记录。

扩展保存在哪
两个位置：
1. 本地磁盘上的.crx⽂件
2. 放在服务器上的url（并且对Windows只能使⽤WebStore⾥的url，官⽅有描述）
本⽂只简单介绍，没有深究细节，需要的去看⽂档吧，⾥⾯还有FAQ⽐较贴⼼。

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。

如何来实现让浏览器自动填充分享密码教程

如何来实现让浏览器自动填充分享密码教程很多时候我们会在网盘中提取文件，但是需要密码，每次问别人会很麻烦，能不能浏览器自动填充呢?那如何来实现让浏览器自动填充分享密码呢?1.这里以Chrome浏览器举例，首先我们在Chrome网上应用店搜索安装一款名为tampermonkey的拓展程序，添加至Chrome。

tampermonkey江湖人称油猴，它是一个神奇的浏览器拓展插件，能够通过加载各类脚本来定制实现浏览器各种你意想不到的功能，本文所述即为它的应用之一。

2.安装上油猴拓展插件后，我们可以直接在地址栏右侧看到拓展程序图标，接着我们鼠标左键单击"获取新脚本"。

你可以通俗的理解，油猴就是一个让各类脚本插件运行的平台，其实网上很多的插件都有大神写好了，我们可以直接借用。

或者你是大神，也可以打造属于自我的脚本。

3.接着我们会来到“脚本源下载地”，这里有着丰富的各类脚本，更新勤脚本全适合国内大多数使用者使用的话，这里推荐大家使用GreasyFork。

已经停止更新。

4.来到GReasy Fork，这里直接搜索“网盘自动填写密码”，咱们点击安装第一个即可。

5.对于已安装脚本的管理，我们可以点开拓展图标，管理面板，这里可以操作脚本的开与关或者更新或删除等操作，随之你所安装的脚本多了，这便是有效管理脚本的一个好方法。

操作完上面的步骤，接下来我么就可以去试验一下是否有效了。

来打开某网站的某个分享页面，咱们直接点击分享链接就能提取访问码而自动填充，省去了繁琐的步骤。

相关阅读：电脑维护小技巧Part1：不要用电池玩游戏校园里由于空间和供电的关系，笔记本也就成为了宿舍里游戏的主力平台。

虽然说这几年由于技术的进步，笔记本电脑的续航时间已经有了长足进步，但一定要记住：不要用笔记本电池玩游戏。

这么说的原因不仅是因为笔记本的电量根本支撑不了多长时间，更重要的是游戏时CPU和显卡带来的大功率对笔记本的锂电池有着严重的伤害。

插件的自动填充和表单辅助功能如何使用

插件的自动填充和表单辅助功能如何使用哎呀，说到插件的自动填充和表单辅助功能，这可真是个实用又有趣的话题！我记得有一次，我在网上填写一份超级长的调查问卷。

那里面的问题多得让人眼花缭乱，从个人信息到兴趣爱好，再到各种生活习惯，真是啥都有。

就在我一个一个费劲地敲字，感觉自己的手指都要累断的时候，我突然想起了插件的自动填充和表单辅助功能。

就拿常见的浏览器插件来说吧，比如说某知名的自动填充插件。

当你进入一个需要填写表单的页面时，它就像是一个贴心的小助手，会自动检测表单中的字段，然后根据你之前保存的信息进行填充。

比如说姓名、地址、电话号码这些常用的信息。

你只需要在第一次使用的时候，认认真真地填写好，之后再遇到类似的表单，插件就会“嗖”的一下把这些信息填进去，简直太方便啦！而且，有的插件还能智能识别表单的类型。

比如说，遇到注册账号的表单，它能自动判断需要填写用户名、密码、邮箱等信息，并准确地填充进去。

还有哦，一些表单辅助功能不仅能帮你填充，还能给你提供一些建议和提示。

比如在填写密码的时候，会提醒你设置一个强度高的密码，或者在填写日期的时候，给出一个方便选择的日历小窗口。

另外，有些插件还支持自定义填充的内容。

比如说，你经常需要填写一些特定的工作相关信息，就可以把这些内容提前设置好，需要的时候轻松一点，就填进去啦。

不过呢，使用这些功能的时候也要小心一点。

有时候自动填充的信息可能不是完全准确的，比如说地址更新了但插件还填的是旧地址，这就需要咱们自己检查检查，可别闹了乌龙。

总之，插件的自动填充和表单辅助功能真的是能给咱们的网络生活带来很大的便利。

就像我那次填写调查问卷，如果没有这个功能，估计我得在电脑前忙活半天，说不定还会因为烦躁填错不少信息呢。

现在有了它，节省时间又省力，让咱们能更轻松地应对各种繁琐的表单填写任务。

所以呀，大家都赶紧去试试这些好用的功能，让咱们的网络生活变得更加便捷高效！。

chrome扩展开发——自动填表实例

manifest.json配置文件---------------------------{"name": "项目名称","version": "1.0","permissions": ["tabs", "http://*/*", "https://*/*"],"content_scripts": [{"matches": ["http://*/*", "https://*/*"],"js": ["jquery-1.6.4.min.js"]}],"icons": {"128":"icon.png"},"browser_action": {"default_title": "优酷好友申请批量通过","default_icon": "icon.png","popup": "popup.html"}}-------------------------------------------解释："permissions": ["tabs", "http://*/*", "https://*/*"]是该扩展应用到tabs(选项页)中的所有http://和https://页面"content_scripts": [{"matches": ["http://*/*", "https://*/*"], jquery应用的页面有http 和https开头的页面"js": ["jquery-1.6.4.min.js"] 这是导入jquery用以应用}],浏览器行为："browser_action": {"default_title": "优酷好友申请批量通过","default_icon": "icon.png","popup": "popup.html" 行为代码页面}popup.html浏览器行为代码页面，就是点击浏览器上的图标后，执行这个页面来对当前选项卡页面进行处理-----------------------------------------------<link href="mycss.css" rel="stylesheet" type="text/css" /><script>function click() {//emailvar y = Math.floor(Math.random()*10) + 7 ;var x = Math.pow(10,y);var num = Math.round( ( Math.random()*x ) );var strEmail = num + "@";//user_name//百家姓var arrName = new Array("王","李","张","刘","陈","杨","黄","孙","周","吴","徐","赵","朱","马","胡","郭","林","何","高","梁","郑","罗","宋","谢","唐","韩","曹","许","邓","萧","冯","曾","程","蔡","彭","潘","袁","于","董","余","苏","叶","吕","魏","蒋","田","杜","丁","沈","姜","范","江","傅","钟","卢","汪","戴","崔","任","陆","廖","姚","方","金","邱","夏","谭","韦","贾","邹","石","熊","孟","秦","阎","薛","侯","雷","白","龙","段","郝","孔","邵","史","毛","常","万","顾","赖","武","康","贺","严","尹","钱","施","牛","洪","龚","汤","陶","黎","温","莫","易","樊","乔","文","安","殷","颜","庄","章","鲁","倪","庞","邢","俞","翟","蓝","聂","齐","向","申","葛","柴","伍","覃","骆","关","焦","柳","欧","祝","纪","尚","毕","耿","芦","左","季","管","符","辛","苗","詹","曲","欧阳","靳","祁","路","涂","兰","甘","裴","梅","童","翁","霍","游","阮","尤","岳","柯","牟","滕","谷","舒","卜","成","饶","宁","凌","盛","查","单","冉","鲍","华","包","屈","房","喻","解","蒲","卫","简","时","连","车","项","闵","邬","吉","党","阳","司","费","蒙","席","晏","隋","古","强","穆","姬","宫","景","米","麦","谈","柏","瞿","艾","沙","鄢","桂","窦","郁","缪","畅","巩","卓","褚","栾","戚","全","娄","甄","郎","池","丛","边","岑","农","苟","迟","保","商","臧","佘","卞","虞","刁","冷","应","匡","栗","仇","练","楚","揭","师","官","佟","封","燕","桑","巫","敖","原","植","邝","仲","荆","储","宗","楼","干","苑","寇","盖","南","屠","鞠","荣","井","乐","银","奚","明","麻","雍","花","闻","冼","木","郜","廉","衣","蔺","和","冀","占","公","门","帅","利","满 ");//随机获得var n1 = Math.round(Math.random() * 300);var n2 = Math.round(Math.random() * 300);var n3 = Math.round(Math.random() * 300);var strName = arrName[n1] + arrName[n2] + arrName[n3];//密码var strPwd = 123123;//填表chrome.tabs.executeScript(null, {code:"document.getElementById('email').value='" + strEmail + "'"});chrome.tabs.executeScript(null, {code:"document.getElementById('user_name').focus()"});chrome.tabs.executeScript(null, {code:"document.getElementById('user_name').value='" + strName + "'"});chrome.tabs.executeScript(null, {code:"document.getElementById('passwd').focus()"});chrome.tabs.executeScript(null, {code:"document.getElementById('passwd').value='" + strPwd + "'"});chrome.tabs.executeScript(null, {code:"document.getElementById('repasswd').focus()"});chrome.tabs.executeScript(null, {code:"document.getElementById('repasswd').value='" + strPwd + "'"});chrome.tabs.executeScript(null, {code:"javascript:refresh_captcha()"});chrome.tabs.executeScript(null, {code:"document.getElementById('captcha').focus()"});window.close();}</script><div onclick="click()">reg</div> 。

iMacrosforChrome：自动填写表单

iMacrosforChrome：自动填写表单摘要: iMacros for Chrome是一款可以帮助用户保存并自动填写表单的谷歌浏览器插件。

iMacros for Chrome的开发背景用户每天上网都要输入大量的表单内容，在互联网上有大量的表单需要用户进行输入，其中包括个人信息、帐号、密码等，这些信息大部分都是重复的工作，今天给大家推荐一款可以减少用户劳动力，自动帮助用户添加表单的谷歌浏览器插件。

iMacros for Chrome的简介iMacros for Chrome是一款可以帮助用户自动填写表单的谷歌浏览器插件，用户在chrome中安装了iMacros for Chrome插件以后，该插件就会帮助用户自动记忆用户输入的表单内容，并将这些重复的操作在下次用户输入的时候，进行恢复，从而帮助用户提高填写表单的效率。

iMacros for Chrome的使用方法1.在谷歌浏览器中安装iMacros for Chrome插件，并在Chrome 的扩展器中启动自动填写表单的功能，iMacros for Chrome插件的下载地址可以在本文的下方找到，离线iMacros for Chrome插件的安装方法可参考：怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件？最新谷歌浏览器离线安装版可以从这里下载：。

2.在chrome中安装了iMacros for Chrome插件以后，用户在输入表单项以后，iMacros for Chrome插件就可以帮助用户这些内容，并在用户下次输入的时候，自动进行填写，如图所示：iMacros for Chrome的注意事项1.使用iMacros for Chrome插件的时候，需要用户的一些chrome授权，以便iMacros for Chrome插件对表单里的内容进行保存。

优化前端表单自动填充的方法

优化前端表单自动填充的方法随着互联网的快速发展，我们使用各种网站和应用程序来进行各种操作，而填写表单是我们在日常生活中经常面临的任务之一。

为了提高用户体验和减少重复工作，前端开发人员通常会添加自动填充功能来帮助用户自动填写表单信息。

然而，在实际应用中，我们经常遇到一些问题，如表单填充错误、不完整或不及时等。

为了解决这些问题，本文将探讨一些优化前端表单自动填充的方法。

一、使用浏览器自动填充功能现代浏览器都内置了表单自动填充功能，可以自动填写用户在过去使用过的表单数据。

我们只需要在表单元素中设置相应的属性，浏览器就能够自动填充相应的数据。

例如：```html<input type="text" name="username" autocomplete="username">```在上述示例中，我们设置了一个文本输入框，并启用了自动填充功能，并指定了填充类型为用户名。

浏览器会在用户第一次输入用户名后记住该数据，并在后续使用相同的表单时自动填充用户名。

二、通过JavaScript自定义填充逻辑尽管浏览器的自动填充功能可以满足一般情况下的需求，但在某些特殊情况下可能无法满足我们的要求。

这时候，我们可以通过JavaScript来自定义填充逻辑，以满足特定的需求。

1. 使用LocalStorage或SessionStorage存储填充数据我们可以使用浏览器的LocalStorage或SessionStorage来存储用户的填充数据。

当用户填写表单时，我们可以将表单数据保存到存储中，并在下次打开表单页面时自动填充相应的数据。

例如：```javascript// 保存表单数据到LocalStoragefunction saveFormData() {var formData = {username: document.getElementById('username').value,password: document.getElementById('password').value};localStorage.setItem('formData', JSON.stringify(formData));}// 从LocalStorage获取表单数据并自动填充function loadFormData() {var formData = JSON.parse(localStorage.getItem('formData'));if (formData) {document.getElementById('username').value = ername;document.getElementById('password').value = formData.password;}}// 在页面加载完成后调用加载表单数据window.onload = loadFormData;```在上述示例中，我们使用LocalStorage来保存用户填写的用户名和密码，并在下次加载表单页面时自动填充。