如何使用扩展程序将代码注入facebook / google网页?

时间:2011-06-19 20:34:45

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

我是扩展开发的新手。我正在尝试创建一个扩展,我可以将代码注入网页。我一直在尝试使用谷歌浏览器内容脚本。但我无法在facebook.com或google.com上这样做。它似乎适用于yahoo.com。是否有一个原因?我怎么能绕过这个?

2 个答案:

答案 0 :(得分:5)

我已经在我的某个扩展程序Facebook Friend Exporter中完成了这项工作,请随时查看。它使用Facebook获取您的朋友的联系信息(包括电子邮件),并将其作为新联系人导出到Gmail。这需要Google和Facebook的权限,这与您的权限类似。

由于您需要向Facebook或Google注入代码,因此必须使用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文档中阅读相关内容。请记住,顶级内容脚本匹配只允许您注入“.com”域。考虑到这一点,如果你想要更多的匹配域,你需要逐个输入它们。 (我知道这是有问题的,但出于安全原因)

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

希望有所帮助!

答案 1 :(得分:4)

您可以使用Content Scripts将代码注入任何网站。确保在manifest.json文件的匹配标记中包含“facebook.com”或“google.com”