Вызов библиотеки JS в моем Content Script - WebExtension

Question

У меня есть webextension, светлячок, но я думаю, что это относится и к хрому, а также, который выполняет (chrome.tabs.executeScript, названный в background.js) сценарий контента на browserAction.onClicked слушателя. Этот сценарий содержимого более или менее создает элемент dom на текущей вкладке, используя некоторые данные со страницы. У этого элемента есть html-код внутри и все работает плавно - за исключением того, что я пытаюсь получить его синтаксис выделен. Теперь есть несколько разных библиотек, которые это делают (Prism, HighlightjS, Rainbow и некоторые другие).

Основная идея с этими библиотеками, если я не ошибаюсь, это позвонить colorify, или некоторые такие функции, на <code> DIV, а затем с помощью CSS лист выделения, что синтаксис. Я попробовал несколько вещей, чтобы получить как/либо соответствующие Js или CSS скрипты, которые будут получены на странице:

, такие как, executeScript вместе со сценарием содержания в моем background.js, в этом случае я «d включить этот сценарий в моей background декларации в manifest.json:

chrome.tabs.executeScript(null, { 
    file: "/content_scripts/highlight.pack.js" 
}); 
chrome.tabs.executeScript(null, { 
    file: "/content_scripts/my_content_script.js" 
}); 

Я также попытался загрузить его в через манифеста (который также является то, что я пытался с CSS):

"content_scripts": [ 
    { 
    "matches": ["<all_urls>"], 
    "js": ["content_scripts/highlight.pack.js"], 
    "css" : ["content_scripts/solarized-light.css"] 
    } 
], 

В любом случае, я тогда попробовал несколько вещей, чтобы загрузить это/эти библиотеки в сценарий контента, который делает вышеупомянутый основной подъем (создание DIV на странице):

Я пытался просто позволить библиотеки, такие как Prism сделать это вещь (поставив моей <code> внутри <pre> и придавая ему соответствующую className или даже назвав его вручную из скрипта содержания:

var Prism = { highlightElement: function() {} }; 
window.addEventListener('load',() => {var Prism = window.Prism; }); 

Или более просто

Rainbow.color(div, function() { 
    document.body.appendChild(div); 
} 
// or 
window.Rainbow.color(//... etc 

или Простейшая всего:

window.hljs.initHighlightingOnLoad(); 
// or 
hljs.initHighlightingOnLoad(); 

Часть моей проблемы, и почему я обескуражен, что когда я открываю инспектор/отладчик иногда я вижу js file sourced, но я не смогу вызывать какие-либо функции с консоли . И, кроме того, файлы css, похоже, не получают источников.

Так основы, что я ищу, чтобы сделать это, чтобы вызвать 3 участника библиотеку JavaScript внутри моего содержания сценария и источник CSS-лист из моего webextension в activeTab содержание моего скрипта модифицирующего.

1. Как включить библиотеки?
2. Как отладить скрипт контента, чтобы проверить, как использовать библиотеки?

Answer 1

Так @Xan помог бы обойти отладки это с помощью точки останова внутри скрипта содержимого внутри консоли Firefox.

1. Я побежал фоновый скрипт, который выполняет скрипт содержание
2. Мои манифеста включает в себя CSS, необходимый для подсветки синтаксиса. Я мог бы также включить файл js здесь, но вместо этого я добавляю его в background.js как что-то, что я выполняю (chrome.tabs.executeScript()). Таким образом, он запускается только в том случае, если мне это нужно. (В противном случае он будет работать все время.
3. В инспекторе Debugging вкладку Я поставил точку останова внутри моего основного содержания сценария
4. Внутри брейкпойнте я был в состоянии использовать консоль, чтобы вызвать подсветку синтаксиса библиотеки, как если бы . это глобальная переменная

Оттуда я был в состоянии проверить, как вызвать скрипт и т.д. в конце концов я назвал highlightjs «s hljs объект безwindow спецификатор Просто вызова внутри моего скрипта содержания:.

hljs.highlightBlock(myDiv);