chrome插件开发 获取网页内容

谷歌浏览器chrome 插件，有哪些好用的地方？如何在Chrome 插件中访问any 网页中的JavaScript变量是一个要求。这个Chrome 插件需要监控任何网页中某个变量的变化或者访问它的值，如何更专业地使用Chrome 开发 tool对于本文来说，作为一个Web 开发人，除了以上原因，与我们开发有关的是Chrome的开发 tool。

我从一份官方文件中摘录了对这一点的解释:Executionenvironment内容脚本sexecutedeinaspecianvironment调用数据隔离世界。他们可以进入他们注射的其他页面。nto，butnottoany JavaScript variablesorfunctionscreatedbythepage。itlookstoeachcontentscriptasifthereisnoutherjavascriptexecutionnthegitisrunnigon . same is rueinreverse:javascriptrunningthe pagecanotnotcallnyfunctionsoraccessanyvariablesdefinedbycontentscriptopts .摘自:网页 link，其中提到了ContentScript的执行环境和原页面。

1、获取网银111IETAB 2、鼠标手势111Chrome手势3、SuperDrag4 111Super Drag 4、撤销关闭网页1111 exy撤销关闭Tab 5、bubble Translate 6 111 bubble Translate 6、自动翻页111 AutoPagerChrome7、屏蔽动态广告111 FlashBlock8、GMail提醒111 GoogleMailCheckerPlus9、快速拨号111快速拨号10、迅雷/旋风

对于本文，作为一个Web 开发人，除了以上原因，与我们开发有关的是Chrome的开发工具。在这篇文章中，我想详细谈谈Chrome的开发 browser工具，以及为什么我认为它比Firebug好。如何在谷歌浏览器中打开开发浏览器工具？你可以右键点击页面，选择审查元素:要么在Chrome的工具里，要么你只要记住这个快捷键:CtrlShiftI(或者CtrlShiftJ直接打开控制台)，或者你只要按F12。

元素选项卡这是用来查看和编辑页面上的元素，包括HTML和CSS。左边是查看和编辑页面的HTML结构。可以直接双击一个元素来修改该元素的属性，也可以右键单击EditasHtml直接编辑该元素的Html，或者删除一个元素，所有的修改都会立即呈现在页面上。

这个Chrome 插件需要监控任何网页中某个变量的变化或者访问它的值。但是，默认注入的content.js和原来的网页Javascript脚本不在同一个环境中运行，不能互相访问。我和Search尝试了以下解决方案。不知道有没有更巧妙的方法？Content.js无法访问原文网页。只需在Dom中注入一个inject.js脚本，它就会进入原网页的范围。

下一个解决通讯问题的方法:可以通过外接服务器中转，但是太麻烦了。Inject.js可以直接发起到chrome. runtime . sendmessage 的连接，但是插件必须声明 externally_connectable ，出于安全考虑不能使用*:/*/。Inject.js可以注入Dom事件，被content.js捕获，可行。

要开始创建您的扩展，您只需要为您的扩展创建一个文件夹。程序唯一需要的文件是manifest.json，但也建议准备一些图标的图片和至少一个提供功能的JavaScript，一般来说，还会包括HTML文档、样式表、图片等资源。清单文件的每个扩展名必须在其根目录中包含一个manifest.json文件。