chrome 插件开发

chrome插件开发-消息机制中的bug与解决方案

序言最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以参考下这位牛人的文章 [chrome插件开发之消息传递机制](http://ju.outofmemory.cn/entry/74567 "chrome插件开发之消息传递机制") 感谢这些牛人的分享让我们学到了很多知识. 这篇大牛的文章中有content向background传递消息的按钮,…

Chrome插件开发入门（二）——消息传递机制

Chrome插件开发入门(二)——消息传递机制由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光的博文,总结的挺好.后面附一个自己写过的demo,基本就对消息传递能够熟悉了. 在开发 Chrome 扩展时经常需要在页面之间进行通讯,比如 background 与 content script 之间,background 与 popup 之间等等,本文结合官方文档中的例子介绍了 chrome 扩展开发中消息传递的基本实现.…

vue.js 初体验— Chrome 插件开发实录

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个…

Chrome插件开发，美化网页上的文件列表。chrome-extension，background

上一篇文章通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修改manifest.json这个文件.试想如果一个Chrome插件已经打包好,再去改代码是不可能的. 本文通过另一种方式来实现相同的功能,同时做到页面地址动态可配置.下图是本次要处理的页面:https://jiacrontab.iwannay.cn/download/ 每一行都是一个文件的基本信息,…

Chrome插件开发，美化网页上的文件列表。chrome-extension，content-scripts

趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧. 最近也是需求驱动,研究了下Chrome插件开发.来看一下我们公司运维提供的日志查看页面所有项目的日志都参杂在一起,每次去找都很痛苦.慢慢发现这些日志的名称都有个规律:项目名-日期-后缀,于是想美化下这个页面,但是服务端还动不了,只能在浏览器端想办法. Chrome插件可以本地渲染页面,是个非常不错的选择,直接来看下完成的效果按照“项目名”和“日期”分类了,这样便于查看.同时页面也美化了,不仅实用而且赏心悦目. 一.从零开始了解Chr…

[Chrome插件开发]001.入门

Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面实战讲解 Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本.界面清爽.操作人性化.网络备份资料和快速的启动速度令我爱不释手,还有它拥有众多的扩展程序,相对于firefox的插件来说,数量上和质量上稍显不足,但相信chrome将会很快在扩展上超越fi…

chrome插件开发学习（一）

两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用电子书:http://www.ituring.com.cn/minibook/950 建议总体内容先大概看一下就好,刚开始没必要纠结那么细. 比如chrome扩展框架/mainfest.json文件格式等等,再找个项目边写边学,遇到不会的再去查(文档很重要啊),最后想的话再深入全部详细看下. json的两种…

[No000080]右键解锁增强Chrome插件开发，破除防复制

昨天用360极速(虽然我不喜欢360.)浏览器,登陆知乎查阅一些东西,突然感觉有些观点很赞同,想copy转载一下,我了个去,它丫的居然不让我复制. 地址:https://www.zhihu.com/question/19748408 不过,这个简单啊.很多方法可以实现"丫的就要copy你",更何况,360插件不少呢,于是我试了Enable Copy,Allow Right Click等著名解除防复制的插件,TMD居然都破不了!!于是,自己动手丰衣足食啊. 以前没写过chrome插件,怎…

Chrome插件开发

参考文档: http://open.chrome.360.cn/extension_dev/overview.html 参考博文: http://www.cnblogs.com/mfryf/p/3701801.html http://www.cnblogs.com/jue-star/p/5077036.html 常见问题: http://segmentfault.com/q/1010000003926071…

写在开头: 相当有意思的UI界面,编码实现,浏览速度.对于一天浏览器使用超过10个小时的人来说,能够定制自己的浏览器,是相当的具有诱惑力. Getting Started 1:目前不支持标准发布版本的Chrome插件扩展,不过也有消息马上就开发了,对于我们这个不是问题.4.0使用中 2:创建一个所必要的文件夹,名字任意,用于存放所需文件,开发后,可以通过Chrome打包提交 3:manifest.json文件,存放描述信息,也可以理解为插件运行的总入口,使用JSON的格式进行定义 { "na…

Goolg Chrome 插件开发--Hello world

开发Chrome插件很简单,只要会web开发(html+javascript+css)那么这个就是能驾轻就熟,只需要了解一下插件具体的运行环境及要求就OK了. 1.先创建一个html文件,名字随便取,如index.html,内容如下 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title></title> &…

Chrome插件开发尝试2

在文章1中尝试了开发chrome一个蛋疼的插件,而且必须要写一坨令人费解的代码才能只能,今天来次清爽的开发:如图: 这是 "清爽模式" →_→ 我把popup.html与popup.js都扔掉了首先:看下manifest.json文件(chrome浏览器只认识这个名字),其中代码: { "name": "Test_APP", "version": "1.0", "manifest_versi…

Chrome插件开发尝试1

1.新建文件夹如图:整个项目的结构 2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好txt文件然后再将文件后缀txt改为json) 3.用记事本写入代码如下:(manifest.json) { "name": "Test_APP", "version": "1.0", "manifest_version":2, "description": &quo…

一次日语翻译的Chrome插件开发经历

序言去年7月刚过了日语N2,想着今年考个N1,为了加深日语文化的了解,还有学习日语,平时免不了经常上日语网站. 但是毕竟水平有限,所以不免遇到不认识的单词,日语单词的一个特点就是很多单词你知道是什么意思,但是不知道怎么读. 比如:"簡素な構造" 中的第一个词:"簡素",很显然就是"简单,朴素的意思",但是你肯定不知道它的读音是:"[かんそ]①". 以前遇到这样的词的时候,就会在沪江小D网页版上面查询,但是这样特别麻烦,你要跳…

chrome插件开发.在content_script异步加载页面后, 如何进行JS通信与调用的问题

使用场景在开发Chrome插件时, 有一种需求: 要求在WEB页面显示一个浮动窗口(A), 在此窗口中允许用Ajax方式调用另一个服务器上的一个页面(B) B页面上有独立的功能用JS写function来实现已知条件窗口A可以利用content-script.js动态生成窗口A中放置一个按钮, 调用Onclick方法召唤出B页面, 样例代码如下 <button onclick="invokeContentScript('openalertWin()')">test&l…

【转载】Chrome插件开发尝试

本来来自 http://www.cnblogs.com/rufus-hua/ 1.新建文件夹如图:整个项目的结构 2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好txt文件然后再将文件后缀txt改为json) 3.用记事本写入代码如下:(manifest.json) 注释:其中browser_action 中的dafault_icon 是自己准备的图片(我将一张jpg到网站上转化为了几张不同大小的ico),dafault_popup是默认页面 4. 新…

google chrome插件开发，自己动手，丰衣足食

因为平时上网都用chrome,但总感觉除了速度快,简洁以外总还有地方满足不了我的需要,然后找插件…后来发现,插件虽然海量但找个称心如意的也不是件容易的事儿,用在找插件的时间都能自己写一个了,于是,今年夏天开始的闲暇时间也写了几个,然后在应用中心断断续续发布了,这些插件原本是给自己用的,但也有几个用户专门找我提出了他们的需求. 从开始的不懂到现在三两下就能玩儿一个,走了点远路,今天在这里写下从开发到发布的简单流程,都是很简单的知识一个可用的插件至少包括一个manifest.json和一个js文件…

chrome插件开发-----------将网址转化成二维码website2QRcode

微信自带的浏览器无法输入链接,仅仅能通过扫描二维码实现.可是有时候看到一个有趣的站点,想分享,还得先去将链接转化成二维码的站点.先转成二维码.再扫描.有点麻烦.所以写了一个插件.直接生成二维码. 须要引用的文件:jquery.qrcode.js(将文字转化成二维码)和jquery 用的是Browser Actions实现.用户点击图标.在popup.html中显示二维码,代码例如以下: manifest.json: { "name": "WebSite2QRcode"…

Google Chrome插件开发-Context Menus

本节主要介绍如何在Google Chrome浏览器web页面上点击右键弹出自定义菜单,即如何使用谷歌Context Menus API接口.上节已经把主要流程介绍了,这节就直接上代码,代码都是官方例子没有实际意义,但是可以起到抛砖引玉的作用,大家根据自己的需要开发出自己想要的功能才是王道. manifest.json代码如下: { "name": "Context Menus Sample", "description": "Shows…

Chrome插件开发教程收集

教程: http://open.chrome.360.cn/extension_dev/overview.html http://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html http://blog.csdn.net/my_business/article/details/7711525 http://www.cnblogs.com/-10086/p/5171263.html https://chajian.baidu.com/de…

chrome 插件开发2

登录 | 注册基础文档综述调试 Manifest 文件代码例子模式匹配分类索引改变浏览器外观 Browser Actions 右键菜单桌面通知 Omnibox 选项页覆写特定页 Page Actions 主题与浏览器交互书签 Cookies 开发者工具 Events 浏览历史插件管理标签视窗实现扩展无障碍性背景页 Content Scripts 跨域 XMLHttpRequest 请求国际化(i18n) 消息传递可选权限 NPAPI插件完成并发布应用…

Chrome插件开发新手教程

近期在用百词斩这个站点来学单词,感觉非常不错,就是在回想单词列表的时候仅仅有单词和意思.却没有读音.感觉非常不方便,思来思去,想到了Chrome插件能够胜任这个工作.于是小小的研究了一下. Chrome插件的本质就是一个由 manifest.json 文件和插件所须要的图片,css.html,js资源组成的一个web页面,仅仅是和传统的web页面不同的,它是以chrome浏览器为宿主执行的一个web程序. Chrome插件能够与Web页面交互,也能够通过content script或cross-…

Chrome插件开发笔记

使用 XMLHttpRequest来抓取盗版小说网站里面的内容,但是注意需要在manifest.json文件中设置permission var xhr = new XMLHttpRequest();xhr.open("GET", "http://www.biqukan.com/1_1207/", true);xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // var resp = e…

Chrome插件开发（一）

作为一个开发人员,我们在日常工作中肯定会用到 Chrome 浏览器,同时也会用到谷歌的一些插件,比如 Tampermonkey,AdBlock等,在之前的文章本人还是用了 Tampermonkey,传送门 https://www.cnblogs.com/weijiutao/p/11677932.html, 在某些时候我们会自己开发一些简单实用的插件,本章开始我们就开始学习一下如何做一些简单的谷歌插件. 作为一个新手,我在学习如何制作谷歌插件时翻到了博主小茗同学的笔记 https://www.…

Chrome插件开发（二）

作为一个前端开发者,我们经常需要和各种各样的接口打交道,很多时候我们的开发环境的域和接口所在的域是不同的,比如我们本地开发环境运行域是localhost,但接口所在的域是www.xx.com,这个时候如果我们代码中出现异步请求www.xx.com域API的情况,就会出现跨域问题. 一般情况下,我们会请后端大佬帮我们加上跨域策略,通过设置响应头Access-Control-Allow-Origin来解决跨域问题,但是有时候我们最终的代码可能也会发布到和API的同域的环境上去,如果每个接口都需要请后…

Chrome插件开发（三）

在日常工作中,我们可能经常需要在手机端测试我们所做的页面,如果每次在手机端测试都手输网址,网址短的还好,如果长的网址也需要一个字母一个字母去敲,那无疑是一场噩梦,试想我们有一个工具只需要点击一个按钮就可以将当前网址生成二维码,而手机端仅仅需要扫一扫就可以打开我们想要测试的网址,是不是很美好呢?下面我们就自己动手从零开始实现一个生成当前网址二维码的插件.在开始编写之前,我们需要先做一点点知识预备: 1.我们之前在讲基础知识的时候有提到browser_action和page_action这两个东西,…

Chrome插件开发（四）

在前面我们编写了三个比较实用的插件,在实际工作中,我们还会使用很多其他的插件,比如掘金,Pocket之类的,我们可能需要经常启用或禁用插件或者删除插件,如果每次都要点到更多工具->扩展程序中去做这些操作,会相当烦躁,本节我们将实现一个可以方便管理插件的插件,我们先看看插件运行的截图: 插件实现了对其他插件的启用/禁用/移除等功能,下面我们来说一下如何实现这个插件. 老规矩,在正式开始编写之前,我们先了解一下需要使用到的API: 1.chrome.management.getAll 返回所有已安装…

【chrome 插件开发】的更多相关文章