larscom / ng-chrome-extension Goto Github PK

View Code? Open in Web Editor NEW

159.0 159.0 31.0 175 KB

CLI tool to generate angular chrome extensions

License: MIT License

TypeScript 93.32% JavaScript 6.68%

angular chrome chrome-extension cli extension javascript

ng-chrome-extension's Introduction

Angular Libraries

ngx-translate-module-loader - @ngx-translate/core plugin to easily seperate language files as modules.
ngrx-store-storagesync - @ngrx/store plugin to synchronize state to localstorage/sessionstorage.
ngrx-store-formsync - @ngrx/store plugin to synchronize any reactive form to @ngrx/store.
ng-qrcode-svg - Simple QR code generator (SVG only)
ngrx-signals-storage - @ngrx/signals plugin to save state to localstorage/sessionstorage and restore the state on page load.

Go Libraries

go-bitvavo - Thread safe client library for the Bitvavo platform.
go-cache - High performance, simple generic cache written in GO, including a loading cache.

Tools

gitlab-ci-dashboard - A dashboard for Gitlab CI which gives you a global overview of pipelines and their statuses.
ng-chrome-extension - CLI tool to generate Angular Chrome Extensions.
xbox360-controller-manager - Turn OFF wireless xbox 360 controllers on PC and see the battery status.

ng-chrome-extension's People

Contributors

Stargazers

Watchers

ng-chrome-extension's Issues

Environments in Chrome scope

Is possible to use environments variables from Angular inside the webpack of chrome or are only allowed in the angular "scope"?

Chnage Manifest file data based on environment/or with custom variables

I tried to update the manifest file using copy-webpack-plugin, which is able to update the manifest file data but the project starts compiling again and again like a loop.
Here is my code in webpack.config,js ->

const { CheckerPlugin } = require('awesome-typescript-loader');
const CopyPlugin = require("copy-webpack-plugin")
const { join } = require('path');

const { CheckerPlugin } = require('awesome-typescript-loader');
const CopyPlugin = require("copy-webpack-plugin")
const { join } = require('path');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
    contentPage: join(__dirname, 'src/contentPage.ts'),
    serviceWorker: join(__dirname, 'src/serviceWorker.ts')
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    path: join(__dirname, '../angular/dist'),
    filename: '[name].js'
  },
  plugins: [new CopyPlugin({
    patterns: [{
      from: join(__dirname, '../angular/src/manifest.json'),
      to: join(__dirname, '../angular/src/manifest.json'),
      transform(content, path) {
        return modify(content)
      }
    }]
  }), new CheckerPlugin()],
  resolve: {
    extensions: ['.ts', '.js']
  }
};

function modify(buffer) {
  var manifest = JSON.parse(buffer.toString());
  const url = ["*://localhost/*"]
  if (manifest.host_permissions) {
    manifest.host_permissions.push(...url);
  }
  if (manifest.externally_connectable && manifest.externally_connectable.matches) {
    manifest.externally_connectable.matches.push(...url);
  }
  return JSON.stringify(manifest, null, 2);
}

CSP error after upgrading from Angular 11 to 12

I dont know if I did something more but this was the main thing I have done.

It seems that now Google Chrome requests me to put a hash into the scripts files but, they are imported from angular.json:scripts|styles[].

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Project ignores Angular changes (watch not working)

Hello. For some reason project is not recompiling after Angular file change. I tried changing chrome files and recompile works perfectly but if I change any file in Angular nothing happens.

Any ideas what could be the issue ?
P.S. Tried also cloning this repo and same behavior:
https://github.com/larscom/angular-chrome-extension

Is there a wiki on how to update ng-chrome built extensions from manifest v2 to manifest v3

Any info on upgrading from manifest v2 built chrome extensions ?

Using the extension as addition to existing web page

I have tries the extension and it did work on opening new tab.
My question is about using that a bit differently:
The extension should connect to specific url (manifest) and then inject the entire angular (ver 9) as a floating div into the existing DOM
(btw the dom is also made from angular, though 12)

Can this be achieved?

getting data from the chrome storage doesn't trigger change detection

I am trying to make a angular chrome extension that uses the chrome storage. I have started on a very simple app that sets a value in the storage and then tries to get it. However, the change detection doesn't seem to pick up the changes. I'm wondering if this is an angular thing going wrong or maybe something with the extension.

The typescript code:

  test$: Observable<string> = new Observable<string>();
  test!: string;
  test2!: string;

  constructor(private http: HttpClient) { }

  async ngOnInit(): Promise<void> {
    chrome.storage.local.set({ favoriteCocktail: 'Daiquiri' }, async () => {
      this.test = await bindCallback<string>(chrome.storage.local.get.bind(chrome.storage.local))().toPromise();

      this.test$ = bindCallback<string>(chrome.storage.local.get.bind(chrome.storage.local))().pipe(map(x => x['favoriteCocktail']));

      bindCallback<string>(chrome.storage.local.get.bind(chrome.storage.local))().pipe(map(x => x['favoriteCocktail'])).subscribe(x => {
        this.test2 = x['favoriteCocktail']
      });
      
    });
  }

The pop-up HTML:

<h1>{{ test?.['favoriteCocktail'] }} is my favourite cocktail</h1>
<h1>{{ test$ | async }} is my favourite cocktail</h1>
<h1>{{ test2 }} is my favourite cocktail</h1>

The pop-up looks like this:

I have added the storage to the manifest and rebuild the app, also reloaded it in the ://extension window. I have no idea why the string is not being displayed.

Access window.ethereum properties

I'm developing an app that integrates MetaMask login and i need to access the window.ethereum properties from my authentication.service.ts but i can't because chrome extension js environment is isolated.

Anyone knows a way to call the window.ethereum from the angular files?

load angular as content script

It would be nice if there would be a option to add angular as content script and load some component on the page

Error: authentication required but no callback set

I've installed the tool but executing it throws an error.
My nodejs version is v12.22.1

Import primeng

Hi,

I am programming a small internal extension and have imported primeng. When I now run the project with "npm start", the controls are all displayed cleanly. But when I run the command "npm run build:production" and import the version, it seems that the css files are not copied. What do I have to add so that everything is taken over by primeng?

angular.json
"styles": [ "node_modules/primeng/resources/themes/saga-blue/theme.css", "node_modules/primeng/resources/primeng.min.css", "node_modules/primeicons/primeicons.css", "node_modules/primeflex/primeflex.css", "angular/src/styles.scss" ],

package.json
"dependencies": { "@angular/animations": "^13.0.2", "@angular/cdk": "^13.0.2", "@angular/common": "^13.0.2", "@angular/compiler": "^13.0.2", "@angular/core": "^13.0.2", "@angular/forms": "^13.0.2", "@angular/material": "^13.0.2", "@angular/platform-browser": "^13.0.2", "@angular/platform-browser-dynamic": "^13.0.2", "@angular/router": "^13.0.2", "crypto-js": "^4.1.1", "ngx-build-plus": "^12.2.0", "primeflex": "^3.1.2", "primeicons": "^5.0.0", "primeng": "^13.1.0", "rxjs": "~6.6.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^13.0.3", "@angular/cli": "^13.0.3", "@angular/compiler-cli": "^13.0.2", "@angular/language-service": "^13.0.2", "@types/chrome": "0.0.141", "@types/node": "^12.12.32", "awesome-typescript-loader": "^5.2.1", "bestzip": "^2.1.7", "npm-run-all": "^4.1.5", "rimraf": "^2.7.1", "ts-loader": "^9.2.6", "ts-node": "~10.3.0", "typescript": "~4.4.4", "webpack-cli": "^4.9.0" }

Many greetings

Unable to add css urls and fonts in angular.json

I am trying to add CSS themes for primeNg library.
With a normal angular project we can do it by adding the path to angular.json >> styles.
I am not able to do in angular extension as it throws me an error.

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline'....

Please suggest me how to use those fonts and styles. Thank you @larscom

npm install does not work on a mac

Probably it is because it is mac, but for what it is worth:

npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
npm ERR! code 1
npm ERR! path /usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit
npm ERR! command failed
npm ERR! command sh -c node lifecycleScripts/preinstall && node lifecycleScripts/install
npm ERR! [nodegit] Running pre-install script
npm ERR! [nodegit] Running install script
npm ERR! SOLINK_MODULE(target) Release/acquireOpenSSL.node
npm ERR! ACTION binding_gyp_configureLibssh2_target_configure .
npm ERR! [nodegit] Configuring libssh2.
npm ERR! SOLINK_MODULE(target) Release/configureLibssh2.node
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/allocators/stdalloc.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/commit.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/alloc.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/annotated_commit.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/apply.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/attr_file.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/attr.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/attrcache.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/blame_git.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/blame.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/blob.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/branch.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/buf_text.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/buffer.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/cache.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/checkout.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/cherrypick.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/clone.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/commit_list.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/config_cache.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/config_entries.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/config_file.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/config_mem.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/config_parse.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/config_snapshot.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/config.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/crlf.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/date.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/delta.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff_driver.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff_file.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff_generate.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff_parse.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff_print.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff_stats.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff_tform.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff_xdiff.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/diff.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/errors.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/fetch.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/fetchhead.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/filebuf.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/futils.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/filter.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/global.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/graph.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/hash.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/hash/sha1/sha1dc/sha1.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/hash/sha1/sha1dc/ubc_check.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/hash/sha1/collisiondetect.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/hashsig.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/ident.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/idxmap.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/ignore.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/index.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/indexer.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/iterator.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/mailmap.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/merge_driver.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/merge_file.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/merge.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/message.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/mwindow.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/net.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/netops.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/notes.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/object_api.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/object.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/odb_loose.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/odb_mempack.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/odb_pack.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/odb.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/offmap.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/oid.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/oidarray.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/oidmap.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/streams/mbedtls.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/streams/openssl.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/streams/registry.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/pack-objects.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/pack.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/parse.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/patch_generate.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/patch_parse.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/patch.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/path.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/pathspec.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/pool.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/posix.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/pqueue.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/proxy.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/push.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/reader.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/rebase.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/refdb_fs.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/refdb.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/reflog.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/refs.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/refspec.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/regexp.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/remote.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/repository.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/reset.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/revert.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/revparse.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/revwalk.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/settings.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/sha1_lookup.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/signature.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/streams/socket.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/sortedcache.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/stash.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/status.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/strmap.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/submodule.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/sysdir.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/tag.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/thread-utils.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/trace.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/trailer.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transaction.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transport.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/cred_helpers.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/cred.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/git.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/local.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/smart_pkt.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/smart_protocol.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/smart.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/ssh.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/tree-cache.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/tree.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/tsort.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/util.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/varint.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/vector.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/wildmatch.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/worktree.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/xdiff/xdiffi.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/xdiff/xemit.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/xdiff/xhistogram.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/xdiff/xmerge.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/xdiff/xpatience.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/xdiff/xprepare.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/xdiff/xutils.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/zstream.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/streams/stransport.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/http.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/auth.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/auth_negotiate.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/transports/auth_ntlm.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/streams/tls.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/unix/map.o
npm ERR! CC(target) Release/obj.target/libgit2/vendor/libgit2/src/unix/realpath.o
npm ERR! LIBTOOL-STATIC Release/git2.a
npm ERR! CC(target) Release/obj.target/zlib/vendor/libgit2/deps/zlib/adler32.o
npm ERR! CC(target) Release/obj.target/zlib/vendor/libgit2/deps/zlib/crc32.o
npm ERR! CC(target) Release/obj.target/zlib/vendor/libgit2/deps/zlib/deflate.o
npm ERR! CC(target) Release/obj.target/zlib/vendor/libgit2/deps/zlib/inffast.o
npm ERR! CC(target) Release/obj.target/zlib/vendor/libgit2/deps/zlib/inflate.o
npm ERR! CC(target) Release/obj.target/zlib/vendor/libgit2/deps/zlib/inftrees.o
npm ERR! CC(target) Release/obj.target/zlib/vendor/libgit2/deps/zlib/trees.o
npm ERR! CC(target) Release/obj.target/zlib/vendor/libgit2/deps/zlib/zutil.o
npm ERR! LIBTOOL-STATIC Release/zlib.a
npm ERR! CC(target) Release/obj.target/http_parser/vendor/http_parser/http_parser.o
npm ERR! LIBTOOL-STATIC Release/http_parser.a
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/agent.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/bcrypt_pbkdf.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/blowfish.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/crypt.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/keepalive.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/libgcrypt.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/openssl.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/publickey.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/sftp.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/version.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/channel.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/global.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/kex.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/mac.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/packet.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/scp.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/transport.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/comp.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/hostkey.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/knownhost.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/misc.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/pem.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/session.o
npm ERR! CC(target) Release/obj.target/libssh2/vendor/libssh2/src/userauth.o
npm ERR! LIBTOOL-STATIC Release/ssh2.a
npm ERR! CC(target) Release/obj.target/ntlmclient/vendor/libgit2/deps/ntlmclient/ntlm.o
npm ERR! CC(target) Release/obj.target/ntlmclient/vendor/libgit2/deps/ntlmclient/unicode_builtin.o
npm ERR! CC(target) Release/obj.target/ntlmclient/vendor/libgit2/deps/ntlmclient/util.o
npm ERR! CC(target) Release/obj.target/ntlmclient/vendor/libgit2/deps/ntlmclient/crypt_commoncrypto.o
npm ERR! LIBTOOL-STATIC Release/ntlmclient.a
npm ERR! CXX(target) Release/obj.target/nodegit/src/async_baton.o
npm ERR! Failed to execute '/usr/local/Cellar/node/16.11.1/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit/build/Release/nodegit.node --module_name=nodegit --module_path=/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp
npm ERR! info it worked if it ends with ok
npm ERR! node-pre-gyp info
npm ERR! using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | x64
npm ERR! node-pre-gyp WARN
npm ERR! Using request for node-pre-gyp https download
npm ERR! node-pre-gyp info
npm ERR! check checked for "/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit/build/Release/nodegit.node" (not found)
npm ERR! node-pre-gyp
npm ERR! http GET https://axonodegit.s3.amazonaws.com/nodegit/nodegit/nodegit-v0.27.0-node-v93-darwin-x64.tar.gz
npm ERR! node-pre-gyp
npm ERR! http 404 https://axonodegit.s3.amazonaws.com/nodegit/nodegit/nodegit-v0.27.0-node-v93-darwin-x64.tar.gz
npm ERR! node-pre-gyp WARN Tried to download(404): https://axonodegit.s3.amazonaws.com/nodegit/nodegit/nodegit-v0.27.0-node-v93-darwin-x64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v93 ABI, unknown) (falling back to source compile with node-gyp)
npm ERR! node-pre-gyp http 404 status code downloading tarball https://axonodegit.s3.amazonaws.com/nodegit/nodegit/nodegit-v0.27.0-node-v93-darwin-x64.tar.gz
npm ERR! gyp
npm ERR! 
npm ERR! info it worked if it ends with ok
npm ERR! gyp info
npm ERR! using [email protected]
npm ERR! gyp info using [email protected] | darwin | x64
npm ERR! gyp info
npm ERR! ok
npm ERR! gyp
npm ERR! info it worked if it ends with ok
npm ERR! gyp info
npm ERR! using [email protected]
npm ERR! gyp info using
npm ERR! [email protected] | darwin | x64
npm ERR! gyp info
npm ERR! find Python using Python version 3.9.7 found at "/usr/local/opt/[email protected]/bin/python3.9"
npm ERR! gyp info spawn /usr/local/opt/[email protected]/bin/python3.9
npm ERR! gyp info
npm ERR! spawn args [
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info
npm ERR! spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp
npm ERR! info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/tim/Library/Caches/node-gyp/16.11.1/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/tim/Library/Caches/node-gyp/16.11.1',
npm ERR! gyp info
npm ERR! spawn args   '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/tim/Library/Caches/node-gyp/16.11.1/<(target_arch)/node.lib',
npm ERR! gyp info
npm ERR! spawn args   '-Dmodule_root_dir=/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args
npm ERR! '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp
npm ERR! info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info ok
npm ERR! gyp
npm ERR! info it worked if it ends with ok
npm ERR! gyp info
npm ERR! using [email protected]
npm ERR! gyp info using [email protected] | darwin | x64
npm ERR! gyp
npm ERR! info spawn make
npm ERR! gyp
npm ERR! info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/async_baton.cc:1:
npm ERR! In file included from ../src/../include/async_baton.h:5:
npm ERR! In file included from ../../nan/nan.h:58:
npm ERR! In file included from /Users/tim/Library/Caches/node-gyp/16.11.1/include/node/node.h:63:
npm ERR! In file included from /Users/tim/Library/Caches/node-gyp/16.11.1/include/node/v8.h:30:
npm ERR! /Users/tim/Library/Caches/node-gyp/16.11.1/include/node/v8-internal.h:492:38: error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv'?
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!                                 ~~~~~^~~~~~~~~~~
npm ERR!                                      remove_cv
npm ERR! /Users/tim/Applications/Xcode_10.2.1.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/type_traits:660:50: note: 'remove_cv' declared here
npm ERR! template <class _Tp> struct _LIBCPP_TEMPLATE_VIS remove_cv
npm ERR!                                                  ^
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/nodegit/src/async_baton.o] Error 1
npm ERR! gyp
npm ERR! ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp
npm ERR! ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 19.6.0
npm ERR! gyp ERR! command "/usr/local/Cellar/node/16.11.1/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit/build/Release/nodegit.node" "--module_name=nodegit" "--module_path=/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"
npm ERR! gyp ERR! cwd
npm ERR! /usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit
npm ERR! gyp ERR! node -v v16.11.1
npm ERR! gyp ERR! node-gyp -v v8.2.0
npm ERR! gyp ERR!
npm ERR! not ok
npm ERR! node-pre-gyp ERR! build error
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/Cellar/node/16.11.1/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit/build/Release/nodegit.node --module_name=nodegit --module_path=/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
npm ERR! node-pre-gyp
npm ERR! ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! node-pre-gyp ERR! System Darwin 19.6.0
npm ERR! node-pre-gyp ERR! command "/usr/local/Cellar/node/16.11.1/bin/node" "/usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd
npm ERR! /usr/local/lib/node_modules/@larscom/ng-chrome-extension/node_modules/nodegit
npm ERR! node-pre-gyp ERR! node -v v16.11.1
npm ERR! node-pre-gyp ERR!
npm ERR! node-pre-gyp -v v0.13.0
npm ERR! node-pre-gyp ERR! not ok
npm ERR! [nodegit] ERROR - Could not finish install
npm ERR! [nodegit] ERROR - finished with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tim/.npm/_logs/2021-10-20T20_58_54_018Z-debug.log

Question: sharing common classes between layers

Is it possible, without side effects, to share common code (e.g. a class instance) between the background service and the Angular frontend?

help - open custom new tab only if logged

hi @larscom thanks for this useful library, i have a question, how i can open a new tab only is the user login in the popup?
thank you very much

Can I use RXJS?

I tried it in Tab Component:
public data = from([1, 2, 3, 4, 5]);

and in ngOnInit:

    const subscribe = this.time.subscribe(
      
      value =>{
          this.message = this.count;
          this.count ++;
          console.log(this.count)
      }
    );

But the page doesn't change when value of messsage change. Can it do it?

How to add analytics (e.g. Google Analytics, App Insights)

Hi Lars,

Thank you for this repo, I've been using it for developing my chrome extension. The repo is such an awesome way to simplify the starting point, it is just extremely helpful.

Currently, I'm looking for a clear way to add Google Analytics script to both chrome and angular sides. Do you have any thoughts or plans on that?

Thank you in advance.

Using require or import in background.ts

Is it possible to use npm libraries in background.ts script with require or import?

Angular components in content page?

Hi,
First - Great tool and great work!

I was wondering if theres any supported scenario where im able to use angular components in the content page? For example inject a <my-component> in the current page DOM somewhere.

If its not supported perhaps you could have som ideas about how to achieve it. Where would i start for something like this?

how to load script like jquery.min.js into serviceWorker.ts

Got stuck to do on how to load script like jquery.min.js into serviceWorker.ts
any suggestion?
Thanks

Update from previous version

I saw that the scaffold of the project is in version 11.

How I can update a project that was created with version 9?

I must to create a new project and copy some files?

Build scripts -> "ng build --configuration='development'"

In the generated package.json:

  "scripts": {

    ...

    "build:angular": "ng build --configuration development",
    "build:angular-production": "ng build --configuration production",

    ...

  },

Should be:

  "scripts": {
    ...

    "build:angular": "ng build --configuration='development'",
    "build:angular-production": "ng build --configuration='production'",

    ...

  },

[Question] I want to use moment.js in the backgroundPage, how do I include it?

Hi, firstly thanks for putting together this great project. I am migrating my plugin to use ng-chrome-extension, however, I am struggling to find a way to include moment.js in my backgroundPage. Could you please let me know how to do it and add it to the documentation.

Sorry to post the question in the issues section.

JQuery plugin not working

Not able to add JQuery dependency for the popup. Getting webpack errors tried multiple solutions but didn't worked

I always get an error when I create a project with a "-" in the project name

I always get an error when I create a project with "-" in the project name, and there are no files generated in the folder from the beginning, and vice versa.

Problem with npm i

When you run npm i it says:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: awesome-typescript-loader@5.2.1
npm ERR! Found: typescript@4.7.3
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"~4.7.3" from the root project
npm ERR!   peer typescript@">=4.6.2 <4.8" from @angular-devkit/build-angular@14.0.0
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^14.0.0" from the root project
npm ERR!     @angular-devkit/build-angular@">=14.0.0-next.12" from ngx-build-plus@14.0.0-beta.0
npm ERR!     node_modules/ngx-build-plus
npm ERR!       ngx-build-plus@"^14.0.0-beta.0" from the root project
npm ERR!   4 more (@angular/compiler-cli, @ngtools/webpack, ts-loader, ts-node)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@"^2.7 || ^3" from awesome-typescript-loader@5.2.1
npm ERR! node_modules/awesome-typescript-loader
npm ERR!   dev awesome-typescript-loader@"^5.2.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript@3.9.10
npm ERR! node_modules/typescript
npm ERR!   peer typescript@"^2.7 || ^3" from awesome-typescript-loader@5.2.1
npm ERR!   node_modules/awesome-typescript-loader
npm ERR!     dev awesome-typescript-loader@"^5.2.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\YunusElçi\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\YunusElçi\AppData\Local\npm-cache\_logs\2022-10-25T08_37_36_821Z-debug-0.log

Debug through source files in Chrome DevTools

Thanks for the initiative in creating this CLI tool for Chrome extensions with Angular.
What I thing it's missing is not having the option to analyze and debug the angular app implementation with source code.
After creating a new project and starting it I get the fallowing warnings when inspecting the Angular popup:

DevTools failed to parse SourceMap: chrome-extension://jchfjdadafmbllfnkkmnoopppgkpdboj/runtime.js.map
DevTools failed to parse SourceMap: chrome-extension://jchfjdadafmbllfnkkmnoopppgkpdboj/polyfills.js.map
DevTools failed to parse SourceMap: chrome-extension://jchfjdadafmbllfnkkmnoopppgkpdboj/styles.js.map
DevTools failed to parse SourceMap: chrome-extension://jchfjdadafmbllfnkkmnoopppgkpdboj/vendor.js.map
DevTools failed to parse SourceMap: chrome-extension://jchfjdadafmbllfnkkmnoopppgkpdboj/main.js.map
DevTools failed to parse SourceMap: chrome-extension://jchfjdadafmbllfnkkmnoopppgkpdboj/modules-popup-popup-module.js.map

This is surely related. Don't know if there is an issue with the generated source maps.
For some reason source maps for SCSS seem OK and e.g. styles.scss can be open fine with Chrome DevTools.

Can't close Dialog
Can't Toggle a side nav

https://stackoverflow.com/questions/67856612/mat-dialog-close-doesnt-work-on-angular-11-meterial-11/67856726#67856726

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.