Как вставить HTML с расширением chrome?

У меня есть параметр контекстного меню, и когда он выбран, я хочу вставить некоторый HTML. Я пробовал делать это

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

Но это не работает для меня.

Примечание. Я пытаюсь избежать использования jQuery.

Ответ 1

Здесь вы можете исследовать, как создать расширение и загрузить образец manifest.json.

Скрипты содержимого можно использовать для запуска js/css, соответствующего определенным 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
}

контент- script.js

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

Вышеупомянутый будет выполнять content-script.js для всех URL-адресов, соответствующих http://*/*, где * является подстановочным знаком. поэтому в основном все http страницы.

Скрипты содержимого имеют много свойств, которые можно найти в ссылке выше.

Программируемая инъекция может использоваться, когда js/css не следует вводить на каждую страницу, соответствующую шаблону.

Ниже показано, как выполнить js onclick значка расширения: -

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

Здесь используется метод executeScript, который также имеет возможность вызывать отдельный файл следующим образом: -

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