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

Question

I am a newbie to extension development. I am trying to create an extension where i can inject code into a webpage. I have been trying to do this using google chrome content scripts. But i have been unable to do this on facebook.com or google.com. It seems to work on yahoo.com. Is there a reason for this? How can i get around this?

Answer 1

I have done that in one of my extensions, Facebook Friend Exporter, feel free to take a look. It uses Facebook to get your friends contact information (including Email), and exports them to Gmail as a new contact. That requires permissions from Google and Facebook which is similar to yours.

Since you would need to inject code to Facebook or Google, you must use Content Scripts. Content Scripts allow you to run JavaScript code in the context of the web page. You can use standard DOM to extract/read stuff from that webpage and make changes to them.

In your manifest.json, you would need to define it as follows:

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

For more info regarding the patterns for the matches, you can read about it in the Match Patterns documentation. Remember, the top Content Script match only allows you to inject on the ".com" domains. Just take that into account, if you want more match domains, you need to input them there one by one. (I know this is problematic, but it is for security reasons)

Remember, for complex websites like Google Mail (gmail), it uses iframes usually to represent its DOM. That is why I placed "all_frames: true" because I want that content script to run in all frames of the pages not just the top frame.

Hope that helps!

Answer 2

You can inject code into any websites using Content Scripts. Make sure you include 'facebook.com' or 'google.com' in matches tag in the manifest.json file