javascript - 如何使用扩展程序将代码注入(inject) facebook/google 网页?

标签 javascript google-chrome-extension google-chrome-devtools

我是扩展开发的新手。我正在尝试创建一个扩展程序,我可以在其中将代码注入(inject)网页。我一直在尝试使用谷歌浏览器内容脚本来做到这一点。但我无法在 facebook.com 或 google.com 上执行此操作。它似乎适用于 yahoo.com。是否有一个原因?我该如何解决这个问题?

最佳答案

我已经在我的一个扩展中做到了,Facebook Friend Exporter ,随便看看。它使用 Facebook 获取您 friend 的联系信息(包括 Email),并将它们作为新联系人导出到 Gmail。这需要 Google 和 Facebook 的许可,这与您的许可类似。

由于您需要向 Facebook 或 Google 注入(inject)代码,因此您必须使用 Content Scripts .内容脚本允许您在网页上下文中运行 JavaScript 代码。您可以使用标准 DOM 从该网页中提取/读取内容并对它们进行更改。

在您的 manifest.json 中,您需要按如下方式定义它:

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://*.google.com/*", "http://*.facebook.com/*"],
      "css": ["injected_styles.css"],
      "js": ["injected_script.js"],
      "all_frames": true
    }
  ],
  ...
}

有关匹配模式的更多信息,您可以在 Match Patterns 中阅读相关内容文档。请记住,顶级内容脚本匹配仅允许您注入(inject)“.com”域。考虑到这一点,如果你想要更多的匹配域,你需要一个一个地输入它们。 (我知道这是有问题的,但这是出于安全考虑)

请记住,对于像 Google Mail (gmail) 这样的复杂网站,它通常使用 iframe 来表示其 DOM。这就是我放置“all_frames: true”的原因,因为我希望该内容脚本在页面的所有框架中运行,而不仅仅是顶部框架。

希望对您有所帮助!

关于javascript - 如何使用扩展程序将代码注入(inject) facebook/google 网页?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6404970/

相关文章:

javascript - AngularJS 和 PHP 登录

google-chrome-extension - chrome 扩展 - 从没有弹出窗口的背景页面获取标签 url

google-chrome-extension - Chrome 扩展程序,onbeforerequest,哪个页面正在调用?

google-chrome - 通过设置启用/禁用日志级别 google-chrome-devtools

javascript - Knockout JS - 单击数组中的图像

javascript - 替换 javascript/jquery 中的占位符

Javascript Windows 应用商店应用程序共享魅力

javascript - 用于更新特定选项卡弹出窗口的内容脚本

google-chrome - 在 Chrome 扩展 API 中获取基于选项卡的 url 历史记录

google-chrome - 为什么我无法获得 google chrome CSS Grid Inspector?