Chrome扩展程序内容脚本中的角度元素

问题描述

我一直在尝试创建一个可以在 Chrome扩展程序内容脚本中重复使用的Angular元素。我的目标是替换我当前正在使用的所有JQuery UI代码。我已经引用了以下这些网页。因此，我的目标是在非角度网站以及角度网站上使用此元素。

https://www.techiediaries.com/angular/angular-9-elements-web-components/ https://www.techiediaries.com/angular/angular-9-web-components-custom-elements-shadow-dom/ https://medium.com/angular-in-depth/using-angular-elements-in-a-chrome-extension-5d986744c676

我可以将元素创建为element，但是内容（我的组件）不会显示。

ngModule

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,AppRoutingModule
  ],providers: [],bootstrap: [AppComponent],entryComponents :  [
    AppComponent
 ]
})
export class AppModule {
  constructor(private injector: Injector){
    const appComponent  = createCustomElement(AppComponent,{injector : this.injector});
    customElements.define('tk-e',appComponent );

  }

  ngdobootstrap(): void {
   }
}

Chrome内容脚本

$j(document).ready(function() {

    // Create the Angular Element
    var iframe = document.createElement('tk-e');
    document.body.appendChild(iframe);

});

清单片段

{
    "content_scripts": [{
        "css": ["src/content_scripts/content.css"],"js": ["src/content_scripts/jQuery.min.js","src/content_scripts/moment.js","src/content_scripts/content.js"],"matches": [
            "http://*/","https://*/"
        ],"run_at": "document_end"
    }],"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'","manifest_version": 2,"permissions": ["tabs","alarms","identity","notifications","storage"],"version": "2.0.0","web_accessible_resources": [
        "src/content_scripts/web-content/tk-e.js","src/content_scripts/web-content/styles.css",]
}

如果我单独运行元素（ng服务），那么一切似乎都可以正常工作。所以我想知道如何使它正常工作。我想我在这里缺少什么？

再次，我的目标是使用用户角度元素替换扩展中的所有jquery。

任何想法都将不胜感激。如果有人有更好的方法在Chrome扩展程序的内容部分中使用Angular，我希望听到它。 ：）

预先感谢， 汤姆

----------更多------------- 好的，我深入问题的底部，但是我不确定如何解决它。

我收到错误“ tk-e.js：1未捕获的TypeError：无法读取未定义的属性'bind'”

有了这个扩展，我正在使用Jquery，但我不知道那是否有东西 是否与这个问题有关。但是我创建了一个没有jquery的测试扩展，并且我的自定义元素可以很好地插入。

最重要的是，我不知道如何解决此问题。

有什么建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）