正文
chrome插件访问原始页面的变量
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
开发chrome插件时遇到需要获取原始网页中的一个js变量的值问题。由于content.js和原始网页的作用域环境不同，无法直接获取变量的值，提示undefined。谷歌找到大神提供的办法。综合起来记录如下：
考虑到Google Reader的网页太复杂，这里就以Google首页来举例了。打开网页后，右键打开审查元素，然后在控制台输入fp，就会看到一个字符串，这就是原始网页的一个全局变量。
现在我要获取它，就可以创建一个script元素，append到head。而这个script元素的执行环境是原始网页的，可以自由使用fp这个变量。
不过fp取出来后也没法直接传递回content script。好在文档里说DOM是共用的，所以可以在这个script里，把值设置为某个元素的属性或innerText，再在content script里获取就行了：
setTimeout(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = "document.body.setAttribute('data-fp', fp);";
document.head.appendChild(script);
document.head.removeChild(script); console.log(document.body.getAttribute('data-fp'));
}, 1000);
这里延迟的原因是原始网页加载完时，还需要等一会才会创建fp变量。
另一种办法就是使用location.href，它是用来跳转网页的，但是也可以用来执行JavaScript，并且执行环境也是原始网页：
setTimeout(function() {
location.href = "javascript:document.body.setAttribute('data-fp', fp);";
setTimeout(function() {
console.log(document.body.getAttribute('data-fp'));
}, 0);
}, 1000);
这里嵌套使用了setTimeout，原因是跳转是一个事件，并不会打断当前脚本的执行（而添加script元素会立刻执行），因此需要让后面的语句等待事件处理完毕。
不过前面所说的方法都必须先保存，再取出，能这样做的只有字符串等简单类型，对函数则无能为力了。
实际上还有更方便的方法，那就是在DOM上绑定一个事件，而事件的处理函数则返回window变量，再在程序中触发这个事件，就能获得执行环境的window变量了。幸运的是，这个执行环境仍然是原始网页的：
setTimeout(function() {
var div = document.createElement('div');
div.setAttribute('onclick', 'return window;');
var unsafeWindow = div.onclick();
console.log(unsafeWindow.fp);
}, 1000);
