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";