How to inject code into facebook/google web page using extensions?

Question

我是扩展开发的新手。我正在尝试创建一个扩展程序，可以在其中将代码注入到网页中。我一直在尝试使用google chrome内容脚本来执行此操作。但是我无法在facebook.com或google.com上执行此操作。它似乎可以在yahoo.com上运行。是否有一个原因？我该如何解决？

Answer 1

我已经在我的扩展程序之一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
    }
  ],
  ...
}

有关比赛模式的更多信息，您可以在“ 比赛模式”文档中进行阅读。请记住，顶级内容脚本匹配项仅允许您在“ .com”域上进行注入。只是考虑到这一点，如果您想要更多的匹配域，则需要一个一个地输入。（我知道这是有问题的，但这是出于安全原因）

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

希望有帮助！