前言：
这句话一定要写在前面：这只是一个刚开始学习写插件的人写的总结，我尽可能严谨，但能力限制不允许啊TAT！所以有什么错误，欢迎指正交流~
注释部分大多为个人理解，未经详细考察推敲，可以直接无视。如有错误，欢迎戳我，及时纠正我的理解误区！thx----q:894355570
进入正题：在extension的编写过程中，会发现：比如我在background.js里面定义了一个函数，然后在popup页面中不能调用！进一步研究，你会发现后台和popup两者之间，并不能共享变量。事实上，这里有三个环境（上下文），为了描述方便，我喜欢称之为background、popup、content。算上浏览页面自身的脚本，一共有四个环境。他们相互独立，拥有不同的上下文，不能共享任何js变量。
/*在同一个上下文中，变量/函数共享同一个命名域/名字空间，所以能够调用同一个文件中其他的变量/函数。比如，我在博客园里有个账号，那么在博客园的域内就能够搜索到我，我也可以通过一定途径，找到同样在博客园的其他人；但你在其他博客网站想查找我的话，无法查到，因为就压根没有我这个用户。*/
===============================华丽丽的分割线===============================================
使用控制台：
在chrome中，按F12后选择console标签，或者ctrl+shift+J都可以快速启动当前页面的控制台。
/*我不知道具体的细节，不过就目前的经验看来，当前页面的console和当前页面载入的脚本属于同一个上下文*/
在console中，你可以访问页面脚本的变量，或者调用页面脚本中的函数。
关于console的更多巧妙用法，可以参考开发手册：
http://developer.chrome.com/devtools/docs/console
以下挑出console中两个非常有用的函数，简直就是在控制台中检测程序的神器：
1.console.log(msg)：在控制台中输出信息。如果参数是对象的话，会输出[Object Object]。/*log其实是把参数当成字符串解析了！*/
2.console.dir(obj)：在控制台中输出信息。不过能够输出对象，通过展开/折叠可以查看对象的各个属性。如下图！/*dir其实是把参数当成对象解析了！不信，可以试试console.dir("abcd");*/
/*一般情况下，我都是在控制台中测试一些基本函数的用法，或者检测自己函数的正确性！把代码直接copy到控制台，然后回车，然后看返回值。*/
后台background：
后台的脚本文件在manifest的“background”属性中设置，比如设置为“background.js”。
如果你在background里面定义了一个变量，你会发现在ctrl+shift+J跳出来的console里面访问不到该变量！这个时候可以深刻体会到后台和页面脚本处于不同的环境！
不过，通过在后台控制页面==>点击 generated_background_page.html 就会弹出后台的console啦！在弹出来的console里面，可以与background.js里面的变量/函数进行交互。
-------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------
弹出页面popup：
所谓弹出页面，就是你点击插件图标时，弹出来的页面。同样，它既不能直接访问后台，也不能访问页面脚本，也处于一个独立的环境之中。
/*机智的你，一定发现了：所谓不能直接访问，言外之意就是可以间接访问。以后再谈*/
可以直接右键==>审查弹出内容，或者点开弹出页面==>右键==>审查元素 就可以调用popup的专属console啦~
-----------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
插件脚本content：
/*不得不说，content环境好像也只有我自己这么称呼,只是为了方便描述，不是什么规范的称呼。它是插件注入的脚本运行的环境。目测手册上称这个环境为 孤立环境（isolated world）我想表达的意思就是：下文提到的 content环境 = isolated world*/
特别需要知道的是，content和页面脚本也是互相独立的两个环境，即便content给你的感觉像是和页面脚本距离最近的一个！
所谓独立，也就是说你不可能在content_scripts的js文件里面，调用原网页脚本的任何变量/函数。
然而，相当高端的事是：content环境可以访问原页面的DOM结构，也就是说，它和页面脚本一样，能够操作页面的任意一个元素！这就意味着，你可以全面干预最终显示在你眼前的页面！
之前说过了，你在浏览页面调用出来的控制台，和你的浏览的页面脚本属于同一个环境，也就是说：这个控制台不能访问content_scripts的js文件中的任何变量/函数。说白了，就是content环境没有属于自己的控制台。/*至少根据目前的我的理解来说，没有；不过这样，才能体现 isolated world的高贵冷艳嘛~*/
关于Debug：
在控制台中，有很多手段可以辅助你debug，我自己也是菜鸟，我就贴两个我最常用的手段吧！
1. 设置断点，在控制台页面选择“Sources”标签，找到你想检查的脚本，然后直接点击行号即可设置断点；
/*如图，我在watcher.js的第五行设置了断点，但程序运行到这一行时会处于暂停状态，可以通过右上角
来继续控制程序的运行。通过右边框中的Call
Stack还有Scope variables还可以看到当前环境中的栈情况以及环境变量。*/
2.console.log()+console.dir()这两个函数配套使用，加到源代码中，可以在控制台中输出临时变量，便于检测逻辑的正确性。
除此之外，虽然笨，但别忘了还有alert()函数，相当于内置在你源码中的断点：运行到alert函数时，会显示一个警告框，在警告框被处理之前，脚本暂停运行。
============================华丽丽的分割线呦=======================================================
小结：
说到底，写插件的时候，务必要意识到background、popup、content是三个相互独立的环境，算上原页面的脚本环境，一共就有四个独立环境了。其中，content和页面脚本共享页面的DOM结构，能够对文档元素进行修改！我自己画了个图，便于理清我自己的理解，如有错误，欢迎尽早指正（至少我的理解在我目前的编写过程中屡试不爽）：
/*或许你和我一样，很有疑问：为什么要有这么多独立的环境？手册上说：这是为了安全性考虑！毕竟需要意识到：你可以干预别人的网页，反过来，别人也可以通过页面脚本干预你的浏览器，窃取你的浏览数据什么的，都是有可能的！如果不把这些环境隔离开来，我们上网的信息就会暴露在别人面前，想想还是挺可怕的！当然，这只是我个人说服我自己的一种理解，毕竟对网络安全不太懂*/
===================================华丽丽的分割线=============================================
参考阅读：
[1]http://developer.chrome.com/extensions/overview 开发手册上给出的一个整体视图的理解
chrome插件（二）-区别三个环境,布布扣,bubuko.com
原文：http://www.cnblogs.com/leenham/p/3604362.html