Как внедрить JS-шаблон руля с помощью скрипта контента? - PullRequest
Новая
       32

Как внедрить JS-шаблон руля с помощью скрипта контента?

1 голос
/ 28 марта 2019

Мне нужно вставить div в текущей вкладке на правой стороне в виде ползунка. Поэтому я использую content_script в манифесте для загрузки сценариев внедрения. Но здесь мне нужно добавить больше html-элементов, поэтому createElement в js сделает мой content.js безобразным. Так что мне нужен движок шаблонов js, чтобы написать html и внедрить их в dom с помощью content.js. Я предпочитаю руль js, так как он поддерживает csp, используя свой компилятор.

Я использую background.js, чтобы отправить оттуда сообщение на content.js, чтобы ввести домен. Эта часть в порядке. Теперь только в content.js должен быть включен html-шаблон, чтобы добавить множество моих требований на страницу.

manifest.json 

{
    "name":"Stack me",
    "version":"0.1",
    "manifest_version":2,
    "description":"hack the dom, inject our dom as a slidbar",
    "background" : {
        "scripts" : ["background/background.js"]
    },
    "content_scripts":
    [
        {
                  "matches": ["<all_urls>"],
            "js":["thirdParty/jquery-3.3.1.min.js", "thirdParty/handlebars-v4.1.1.js", "content/content.js"]
        }
    ],
      "browser_action": {
        "default_icon": "icons/icon.png"
    },

    "icons":{
        "16":"icons/icon.png",
        "128":"icons/icon.png"
    },
      "web_accessible_resources": [
            "icons/icon.png"
      ]
}

background.js 

console.log("background js")

chrome.browserAction.onClicked.addListener(iconClicked)

function iconClicked(tab) {
  let msg = { type: "clientAuth"}
  chrome.tabs.sendMessage(tab.id, msg)
}

content.js 

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
  switch(message.type){
    case "clientAuth":
     registerIfNeeded();
    break;
  }
}

function registerIfNeeded() {
  //call api
  //UI
  if(document.getElementById("myDivId"))
    document.getElementById("myDivId").remove()
  else {
    ...
    var div = document.createElement( 'div' );
    div.id = 'myDivId';
        ...
  }
}

//How to replace the below code to work with templates, which can be included here.
/*<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>AJ</h1>
    <div class="body">
      aj
    </div>
  </div>
</script>

var source   = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);*/
...