Пользовательские элементы расширения Chrome не работают - PullRequest
1 голос
/ 30 марта 2019

Я пишу расширение 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(), это также не сработает.

...