Come inserire HTML con un'estensione di Chrome?

Question

Ho un'opzione del menu contestuale e quando è selezionata voglio inserire del codice HTML. Ho provato a fare questo

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

Ma non funziona per me.

Nota Sto cercando di evitare l'utilizzo di jQuery.

Answer 1

Here è possibile cercare come creare un'estensione e scaricare l'esempio manifest.json.

Content Scripts può essere utilizzato per eseguire js/css corrispondenti a determinati URL.

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

Quanto sopra si esegue l'content-script.js per tutti gli URL http://*/* dove * è un carattere jolly. quindi praticamente tutte le pagine http.

Gli script di contenuto hanno molte proprietà che possono essere trovate nel link sopra.

Programmatic injection può essere utilizzato quando js/css non deve essere iniettato in ogni pagina che corrisponde al modello.

seguente mostra come eseguire i js onclick dell'icona estensione: -

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";' 
    }); 
}); 

Questo utilizza la executeScript metodo, che ha anche un'opzione per chiamare un sep file di arate in questo modo: -

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