Chrome插件笔记之content_scripts】的更多相关文章

一.概论 说这个之前先看一个段子,讲的是甲方有一奇葩客户,这客户看一网站某些样式很别扭不得劲,非要让乙方修改,乍一听没毛病,但关键是这网站不是乙方家的,根本没有修改权限,怎么办,客户就是上帝,上帝的要求怎么好拒绝,这时候乙方就有一神人挺身而出,写了一个修改页面样式的浏览器插件给客户装上,这样客户只要开着这个插件浏览那个网站看到的就是自己想看到的样式.其实原理就相当于将网页html下载之后在客户端通过js和css修改了样式,然后通过浏览器渲染出来看到修改之后的样式,对其他人没有任何影响,但就能在完…
众所周知,微信读书App 是一款非常优秀的阅读类App ,周围也有不少人在用.虽然工作比较忙.但是也没少在上面看书做笔记. 美中不足的是,目前微信读书虽然支持笔记导出,但是提供的是将笔记复制到剪切板,然后由用户自行粘贴到其他地方的功能. 如果你的笔记比较多的话,需要分好几次才可以批量人工导出,每次选择还得记住上一次在什么位置,非常不方便.粘贴出去的格式,也因软件的不同而千差万别. 如下图所示:选择的笔记内容超过了系统剪切板上线.请筛选后重试 于是,就有了“小悦记”这个可以导出多种模式的Chrom…
原来用了几个生成二维码的插件,总是遇见各种问题……最后索性自己弄一个,这里顺便记录一下. Chrome 插件很开放!!!你只要拿到了crx文件,然后把文件的后缀名改为zip,就可以解压了,最后一切的一切…… 此次学习参考:http://open.chrome.360.cn/extension_dev/overview.html  ,用到的Javascript二维码生成器为 https://github.com/davidshimjs/qrcodejs 1.先看一下,目录结构 最主要的就是上图打开…
Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的js框架去实现它. 如果你还是一个Chrome插件的新手并且想尝试写一个的话,下面的文章将会带领大家并且尝试让大家理解Chrome插件的工作机制.这篇文章将会讲述每一块架构,以及相互之间的联系和插件的一般化形式. 架构 Chrome插件中的文件大体上可以分成2部分:Chrome插件中确确实实存在的文…
本文将从个人经验出发,讲述为什么需要Chrome插件,如何开发,如何调试,到哪里找资料,会遇到怎样的问题以及如何解决等,同时给出一个个人认为的比较典型的例子——获取网页内容,和服务器交互,再把信息反馈给用户.OK,准备开始吧,我尽量把文章写得好看点,以免读者打瞌睡. 目录 为什么需要 为什么是Chrome 需要准备什么 如何开始 Page Action Chrome插件结构 学习资料 我的例子 调试 调试Content Scripts 调试Background 调试Popup 一些问题 总结 为…
我用的chrome插件挺多的,所谓工欲善其事必先利其器,我热衷于搜寻好用的工具来让我平时的工作事半功倍.下面介绍几款我正在用的感觉还不错的插件,如果大家还有其它好用的(肯定有,chrome插件库太庞大了),一定要互相分享!! 1. LastPass 用的最爽的一款,强烈推荐.LastPass是一款Freemium的跨平台在线密码管理工具,用于管理大量网站的密码,可按要求生成随机密码,支持自动登录,支持手机两步验证.可能有人会问:1Password.KeyPass就够用了吧,还要这个干嘛?请注意,…
请先看:推荐几款我一直在用的chrome插件(上) 6. Pocket 可以很方便的保存文章.视频等供以后查看,即实现了“Read it later”功能.有了 Pocket,您可以将所有想下次读的内容汇聚到一个地方,然后在任何设备上随时查看.Pocket还提供了另外一个功能,即可以通过发送邮件的方式来保存内容(不需要点击这个插件),发送链接URL到add@getpocket.com即可保存(发送的Email是你注册pocket时使用的Email),当然这种方式比较麻烦,不过可以在没有pocke…
试想一下,如果每天要收集100页网页数据甚至更多.如果采用人工收集会吐血,用程序去收集也就成为一个不二的选择.首先肯定会想到说用java.php.C#等高级语言,但这偏偏又有个登陆和验证码,搞到无所适从.还在为收集web端的数据感到苦恼吗?很高兴,你找对地方了. 应用场景: 1.需要每天大量重复收集web端的数据 2.web页面数据需要登陆后才能采集 3.web页面存在翻页 解决方案: 手工登陆,然后采用chrome插件的方式进行收集.当然你会说用selenium等自动化测试的方法进行收集更co…
工作生活都用百度比较多,毕竟它是目前为止感觉最好的国内PC搜索引擎.我纵使已经差不多炼成了一眼过滤广告的眼力,但始终觉得碍眼,感觉还是写个插件把它屏蔽了吧.这个插件开发的门槛其实非常低,只是一开始做不知道哪里查插件开发的资料才折腾了半天. 一.找一个百度网页出来分析. 1.推广链接有三种:上部无底色,上部有底色和下部有底色:通常是一开始上部的广告是无底色的,刷新多几次后就会变成有底色: 2.查看CSS可以看到,主搜索结果和广告都在一个id为content_left的div容器里(见图左上方红框)…
我们平时用手机调试时,经常是手不离机,以前可以下载个jar包能把手机屏映射到电脑桌面,但是运行比较卡,后来就放弃了,再之,手机接数据线有时也不太方便 ,pc与手机(连wifi)如处同一网段,就可以通过无线来调试! 使用无线调式方法: 一:cmd开启命令窗口:(设置adbd 监听端口) adb  tcpip  5555 <设置adbd服务的端口> 二,cmd再开启另一个窗口:(开启adb网络调试模式) adb  connect  192.168.3.229:5555  <该地址为手机wif…
Chrome 插件: 起动本地应用 (Native messaging) www.MyException.Cn  网友分享于:2014-08-01  浏览:3次   Chrome 插件: 启动本地应用 (Native messaging) 最近碰到了一个新问题,需要利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地C#应用,同时给这个应用传值来进行不同的操作. 在这里记录下解决的过程,以便以后查找 首先我们需要新建一个google的插件 这个插件包含了三个文件 manifest.j…
资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js,劫持 XSS,一些猥琐的想法与实践 2013-07-08      0个评论       收藏    我要投稿     0x00 Chrome插件--------------------------这个想法是昨天看到@紫梦芊 的帖子想起来的.想法如下:Chrome插件是可以通过manifest.json的控…
[开发必备]吐血推荐珍藏的Chrome插件 一:(Lying人生感悟.可忽略) 青春浪漫,往往难敌事故变迁.生命对每一个人都是平等的,彼此所经历的那就一定是彼此所必须经历的,它一定不是只为了折磨.消耗我们.它一定会在我们未来的人生路上发生一定的化学反应.如果这些事在你我的人生中必须要经历,还不如让它来的早一点,在我们还可以从头再来的时候一起牵着手,心连心地走下去...... 二:(回到正题.待细看) 一直都对Chrome情有独钟,第一次接触她只因她的icon就喜欢上它了,后来便一发不可自拔,现在…
2015年最实用的9款chrome插件 随着14年chrome浏览器的市场超过IE浏览器,chrome凭借它强劲性能和出色的使用体验真正的登上了平民级的殿堂.今天小编就为大家推荐9款自己常用的chrome插件神器. 1.非常实用的chrome新标签页---Infinity新标签页 Infinity新标签页插件是一款可以把chrome默认新标签页换成一个美观实用的infinity新标签页,不仅有简洁美观的页面,还有快速拨号,邮件提醒,天气预报,笔记功能,待办事项,壁纸,历史记录管理等. 2.Chr…
分享自己一直在用的chrome插件 1. Adblock Plus 广告屏蔽插件,能够屏蔽YouTube视频广告.Facebook广告.弹出窗口和其他显眼的广告,个人认为非常强大. 2.AutoPagerize 自动翻页插件,这个插件能在你使用Google搜索时不必点击下一页,自动连接上一页与下一页内容,对我这种强迫症患者来说还挺好用的. 3.Checker Plus for Gmail™ 无需打开 Gmail 或 Inbox,即可收到桌面邮件通知,方便地查看.收听或删除邮件,并且支持多账户.…
写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/liuxianan/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 什么是Chrome插件 严格来讲,我们…
前言 相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(Extensions).最近为了更好的利用谷歌浏览器,我整理了一些常用的谷歌插件,分享给大家. 正文 闲话不多说,直接上推荐的插件,点击文章最后面左下角的“阅读原文”就可以获取所有插件的下载链接了~ 通用类插件 1.OneTab:将无数 Tab 合并在一个页面 很多时候我们在一个窗口打开太多的tab,每一个tab太小不容易管理,这时候…
1 前言 目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异.对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里执行一些我们自己的javascript,删除掉这些广告条目. 2 插件简介 Chrome插件逻辑主体为两部分组成,一是在目标文档(比如www.baidu.com页面)运行的js和css,叫content_scripts:一部分是在chrome外壳上加载与显示的内容(比如图标和设置界面)叫browse…
写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 什么是Chrome插件 严格来讲,我们正在说的东…
无扩展,不 Chrome :几款 Chrome 扩展程序推荐 相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(Extensions). 少数派官微最近不定期推荐了一些 Chrome 扩展,得到了不错的反响,于是我们作了一番整理,把 几款优质的 Chrome 扩展集中推荐给大家. 下载方式: 下面这个谷歌商店的网址可FQ的直接搜索下载即可:https://chrome.google.com…
访问网站的时候,最烦的就是一些弹窗和广告.于是,就想着能不能在访问特定网站的时候,执行一段js脚本,去除页面的广告.于是乎,好像 chrome 插件可以实现. 这里,以 百度 的网站为例 新建 simple01 文件夹: 内部文件结构如图: 主要是 manifest.json的配置: { "manifest_version":2, "version":"1.0.0", "name":"myAdSafe",…
准备软件环境 1. 软件环境 首先,需要使用到的软件和工具环境如下: 一个最新的chrome浏览器 编辑器vscode 2. 使用的js库 代码高亮库:prismjs https://prismjs.com/download.html markdown解析库:marked.min.js https://github.com/markedjs/marked 搭建工程 创建一个md-reader目录,进入md-reader目录 1. 目录结构 然后,创建需要的文件 md-reader |----sr…
背景 我一般都是在activity dashboard页看同事的提交记录,这样只要我有权限的项目有人提交了我就能够知道,虽然提交的具体代码压根不看.......但至少能够了解各个项目的开发情况(如果大家都认真写了commit message的话).不过有个比较悲剧的情况是有一个我有权限的项目我只是看看并不参与开发,在activity dashboard我能看到同事对此项目的提交记录,而此项目的迭代速度比较快,所以看起来就像有一些commit狂魔在刷屏,经常出现对我并不是很重要的信息占据了大片屏幕…
chrome插件编写基本入门  http://igeekbar.com/igeekbar/post/331.htm #精选JAVASCRIPTCHROME 作为一名程序猿,怎么能不会写chrome插件呢[笑] 所以今天就教教大家怎么写最基本的chrome插件,不对,确切地说是互相学习一起学习. (我是不会告诉你说我也是刚学会没多久的!) 基础知识: 首先,我们要知道一个 chrome插件需要哪些文件 其实很简单 配置(入口)文件 manifest.json xx.html xx.css xx.j…
说chrome插件编写的先关文章, 首推小茗的[干货]Chrome插件(扩展)开发全攻略. 有非常完善的理论,引用和demo代码. 但是还是建议看官方的 chrome extensions. chrome 插件是什么,能做什么 增强浏览器功能,HTML.CSS.JS.图片等资源组成的一个.crx后缀的压缩包. 从界面到网络请求,到本地资源的交互,都是统统可以的. 比如: ColorZilla: 取色工具 Octotree: github 项目的右边导航 FeHelper: Web 前端助手, j…
最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. 如果你有前端开发的经验,那么你将可以很快开始你的chrome插件开发.chrome插件开发的主要内容仍然是“老三样”——HTML. CSS.javascript  不同的是执行环境与平时的浏览器略有不同,且有一些安全限制,还有插件开发中能用到一下chrome专门封装api 有哪些比较好的文档? 首…
代码地址如下:http://www.demodashi.com/demo/14306.html 安装 安装 Visual Studio Code 和Chrome, 自行FQ 详细安装这里略过 安装包管理工具 用管理员身份运行cmd,输入: npm install -g bower (全局安装) 创建 新建目录brochure 进入目录运行 bower install bootstrap@3 vue axios 成功! 新建 css, js 目录,并在对应的目录下面新建 index.css 和 i…
前言 相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(Extensions).最近为了更好的利用谷歌浏览器,博主整理了一些常用的谷歌插件,分享给大家,考虑到一些无法FQ的童鞋,给力的博主当然是顺便给出离线安装文件. 正文 闲话不多说,直接上推荐的插件,可以FQ的直接点击标题跳转谷歌商店下载,不信的我下面也给出离线安装文件 通用类插件 1.OneTab:将无数 Tab 合并在一个页面很多时…
缘由 chrome应用商店有三款二维码插件,自己一直使用的第一款.这三款插件有且只有一个功能就是生成当前页面的URL的二维码. 其实这个功能基本上满足了需要移动端开发在微信里打开页面进行调试的情况. 但是也有少数情况(如:页面存在重定向),无法直接在桌面上打开链接.此时以往我习惯性的打开百度,输入二维码,找到草料二维码,填入链接,然后生成二维码,最后微信扫一扫. 每次有此情况发生的时候,脑子里都存在一个想法为什么生成当前页面的URL的插件上存在一个输入框,可以手动生成一个二维码呢?! Chrom…
[干货]Chrome插件(扩展)开发全攻略   写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/liuxianan/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图…