如何使用擴展程序將代碼注入facebook / google網頁？

Question

我是擴展開發的新手。 我正在嘗試創建一個擴展，我可以將代碼注入網頁。 我一直在嘗試使用谷歌瀏覽器內容腳本。 但我無法在facebook.com或google.com上這樣做。 它似乎適用於yahoo.com。 是否有一個原因？ 我怎么能繞過這個？

Answer 1

我已經在我的一個擴展程序Facebook Friend Exporter中完成了這一操作，請隨時查看。 它使用Facebook獲取您的朋友的聯系信息（包括電子郵件），並將其作為新聯系人導出到Gmail。 這需要Google和Facebook的權限，這與您的權限類似。

由於您需要向Facebook或Google注入代碼，因此必須使用內容腳本 。 內容腳本允許您在網頁的上下文中運行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”的原因，因為我希望內容腳本在頁面的所有幀中運行，而不僅僅是頂部幀。

希望有所幫助！

Answer 2

您可以使用內容腳本將代碼注入任何網站。 確保在manifest.json文件中的匹配標記中包含“facebook.com”或“google.com”