Adding a piece of code to a page: Chrome Extension

StackOverflow https://stackoverflow.com/questions/14513380

Question

Okay, here's what I want my Chrome Extension to do:

It's just a button in the corner, and when you click on it :O it adds a tag(don't want to give the idea away)right after the body tag. I don't want it so like the user gets to edit the html, I just want it so when you click the button it adds a tag, and I was wondering how I could achieve this. JavaScript, or is there something else I could use to get this done. Or is this even possible. Anyone have any idea?

So basically, if this is the html:

<DOCTYPE! html>
<html>
<head>
    <title>Some title</title>
</head>
<body>
    <p>Some content</p>
</body>
</html>

Than when you click the button, this happens:

<DOCTYPE! html>
<html>
<head>
    <title>Some title</title>
</head>
<body>
    <center> //or some other tag
    <p>Some content</p>
</body>
</html>
Was it helpful?

Solution

I, you should do a content script extension. Content script code will run in the page, and can add a button wherever you like in the page. You hang a click listener to it with .addEventListener (all DOM stuff, nothing Chrome extension specific), and so on. Read about Chrome extensions Content Scripts here.

Your manifest.json should be like this:

{
  "name": "My Extension",
  "version": "0.1",
  "manifest_version": 2,
  "description": "A plain text description",
  "default_locale": "en",
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["yourScript.js"]
  }],
}

It will inject yourScript.js in every page. Depends on what are you trying to do, know that yourScript.js has some Content Security Policy limitations you can change.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top