javascript - How to insert HTML with a chrome extension?

Question

I have a context menu option and when it is selected I want insert some HTML. I have tried doing this

var div=document.createElement("div");
document.body.appendChild(div);
div.innerText='test123';

But it's not working for me.

Note I am trying to avoid using jQuery.

Answer 1

Here you can research how to create an extension and download the sample manifest.json.

Content Scripts can be used to run js/css matching certain urls.

manifest.json

{
  "name": "Append Test Text",
  "description": "Add test123 to body",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["content-script.js"]
    }
  ],
  "browser_action": {
    "default_title": "Append Test Text"
  },
  "manifest_version": 2
}

content-script.js

var div=document.createElement("div"); 
document.body.appendChild(div); 
div.innerText="test123";

The above will execute the content-script.js for all urls matching http://*/* where * is a wildcard. so basically all http pages.

Content scripts have many properties which can be found in the link above.

Programmatic injection can be used when js/css shouldn't be injected into every page that matches the pattern.

Below shows how to execute the js onclick of the extension icon:-

manifest.json

{
  "name": "Append Test Text",
  "description": "Add test123 to body",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Append Test Text"
  },
  "manifest_version": 1
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";'
  });
});

This uses the executeScript method, which also has an option to call a separate file like so:-

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    file: "insert.js"
  });
});

insert.js

var div=document.createElement("div"); 
document.body.appendChild(div); 
div.innerText="test123";