V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Get Google Chrome
Vimium · 在 Chrome 里使用 vim 快捷键
yqf3139
V2EX  ›  Chrome

如何在 Chrome 插件中访问任意网页中的 JavaScript 变量?

  •  
  •   yqf3139 · 2015-12-26 14:23:39 +08:00 · 5692 次点击
    这是一个创建于 3037 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有这样需求,此 Chrome 插件需要监听任意网页中某个变量的变化,或是访问其中的值。但默认注入的 content.js 和原网页 Javascript 脚本并不运行在一个相同的环境中,无法相互访问。

    搜索和自己尝试了如下的解决方法,不知是否还有更巧妙的方法?

    content.js 没有办法访问到原网页,只要向 Dom 中再注入一个 inject.js 脚本就进入了原网页的作用域。如果能让 inject.js 与 content.js 或是直接与 background.js 通信即可。

    接下来的通信问题的解决方法:
    - 可以通过外部服务器中转,不过太麻烦了。
    - inject.js 可以通过`chrome.runtime.sendMessage`直接向插件发起连接,但插件必须声明`externally_connectable`,并且安全起见不能使用*://*/*匹配所有域名。
    - inject.js 可以注入 Dom 事件,由 content.js 捕获,可行。
    - inject.js 可以写入 localStorage 或者其他共享的变量,由 content.js 轮询,不过如果变量发生了多次修改,每次的修改事件就很难及时发出。
    - 可由 content.js 创建一个 SharedWorker 的函数,并将其转换为 Blob ,再使用`URL.createObjectURL`创建为共享链接存入 localStorage , inject.js 读取后此链接后,两个脚本同时连上同一个 SharedWorker ,由 worker 转发消息,可以很好双向通信。
    4 条回复    2015-12-26 15:27:38 +08:00
    tux
        1
    tux  
       2015-12-26 14:29:20 +08:00
    用 userscript
    yqf3139
        2
    yqf3139  
    OP
       2015-12-26 14:36:32 +08:00
    @tux 访问的变量想发回插件后台页面分析,所以应该还是需要插件的
    L3au
        3
    L3au  
       2015-12-26 15:08:41 +08:00
    楼主想法不错啊,简单点 postMessage 就可以双向通信了,感觉上可以把 content.js 看成一个 iframe
    参考: https://developer.chrome.com/extensions/content_scripts#host-page-communication
    yqf3139
        4
    yqf3139  
    OP
       2015-12-26 15:27:38 +08:00
    @L3au 感谢提醒,简单多了,我最后一种方法兜了一大圈,就是没有找到 window.postMessage 这个 API 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2599 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 15:20 · PVG 23:20 · LAX 08:20 · JFK 11:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.