0

我一直在尝试创建一个可以在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

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

模块

@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 serve），一切似乎都正常工作。所以我想知道如何让它正常工作。我想我在这里遗漏了什么？

同样，我的目标是使用 angular 元素来替换我的扩展中的所有 jquery。

任何想法将不胜感激。如果有人有更好的方法在 Chrome 扩展的内容部分使用 Angular，我很想听听。:)

在此先感谢，汤姆

---------- MORE ------------- 好的，我找到了问题的根源，但我不知道如何解决它。

我收到错误“tk-e.js:1 Uncaught TypeError: Cannot read property 'bind' of undefined”

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

底线是我不知道如何解决这个问题。

有什么建议么？

4

0 回答 0