Я пишу расширение Chrome, которое определяет пользовательский элемент. Я использую библиотеку webcomponents
(документация здесь ), чтобы заполнить мой пользовательский элемент.
Если я вызываю функцию в своем пользовательском элементе, я получаю ошибку Uncaught TypeError: ... is not a function
. Что я делаю не так?
background.js
class CustomElement extends HTMLElement {
constructor() {
super();
}
foobar() {
console.log("foobar!");
}
}
// Define the new element
customElements.define('custom-element', CustomElement);
const test = document.createElement("custom-element");
test.id = "test";
// works
test.foobar();
// doesn't work
$("#test").get(0).foobar();
// doesn't work
document.getElementById("test").foobar();
manifest.json
{
"name": "Test",
"version": "1.0",
"description": "Test",
"browser_action": {
"default_title": "Test",
"default_popup": "html/popup.html"
},
"content_scripts": [ {
"js": [ "scripts/jquery-3.3.1.min.js", "scripts/background.js", "scripts/webcomponents-bundle.js" ],
"matches": ["<all_urls>"]
}],
"manifest_version": 2
}
Если я открою консоль Chrome и попытаюсь найти там свой элемент / вызов foobar()
, это также не сработает.