javascript - How to use Chrome Extension Api with Angular? - Stack Overflow

admin管理员组

文章数量:1344628

I am working on a chrome extension, I have a "background.js" which it filters the url and fetchs data from my api. When the conditions is meet I am sending a message from "background.js". And I want to catch it from Angular ponent.

background.js

...
chrome.pageAction.show(tab.id, () => {
            chrome.runtime.sendMessage({data: dataFromAPI})
        });
...

I ran npm install --save @types/chrome.

appponent.ts

import {Component} from '@angular/core';
import {chrome} from '@types/chrome';
@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css']
})
export class AppComponent {

  constructor() {
    chrome.runtime.onMessage.addListener( data => console.log(data));
  }

}

But WebStorm says, ".../node_modules/@types/chrome/index.d.ts' is not a module. "

How can I use Chrome Api from Angular Component?

I am working on a chrome extension, I have a "background.js" which it filters the url and fetchs data from my api. When the conditions is meet I am sending a message from "background.js". And I want to catch it from Angular ponent.

background.js

...
chrome.pageAction.show(tab.id, () => {
            chrome.runtime.sendMessage({data: dataFromAPI})
        });
...

I ran npm install --save @types/chrome.

app.ponent.ts

import {Component} from '@angular/core';
import {chrome} from '@types/chrome';
@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent {

  constructor() {
    chrome.runtime.onMessage.addListener( data => console.log(data));
  }

}

But WebStorm says, ".../node_modules/@types/chrome/index.d.ts' is not a module. "

How can I use Chrome Api from Angular Component?

• javascript
• angular
• typescript
• google-chrome-extension

Share Improve this question Follow asked Nov 6, 2018 at 10:08 Muhammed OzdoganMuhammed Ozdogan 5,88788 gold badges3636 silver badges5656 bronze badges 3

• chrome.pageAction.show only exposes the icon, it doesn't open the pageAction itself so those scripts aren't running and you can't send messages there. Only when the user clicks the icon, the pageAction popup is shown and can receive messages. – woxxom Commented Nov 6, 2018 at 10:11
• Thanks, do you remend any solition to activate the pageAction and send data it from the background.js, also the main problem is "ng build" is not working.Error :"ERROR in src/app/app.ponent.ts(11,5): error TS2304: Cannot find name 'chrome'." – Muhammed Ozdogan Commented Nov 6, 2018 at 10:16
• did you get the solution for this? Same problem here – Muhammad chhota Commented Mar 1, 2019 at 7:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

/// <reference types="chrome"/>
import {chrome} from '@types/chrome';
// Remove chrome import

IMPORTANT: Must add three slashes before reference.

If still it doesn't work then add "Chrome" in tsconfig.json types.

pilerOptions: ["types": [ "Chrome" ] ]

Add the line

///<reference types="chrome"/>

to the very top of your TS file (preferably line 1). (DO NOT OMIT THE 3 SLASHES IN THE BEGINNING)

Also run the mand

npm install --save @types/chrome 

Things will start working after that.

In my case, I installed npm install --save @types/chrome

so file stop showing an error Cannot find name 'chrome' when build

then I'm trying to build the library by using the mand ng build but it was broken because it didn't find a chrome so what I did?

I added this line ///<reference types="chrome"/> on top of file public-api.ts

Note: Must add three slashes(///) before reference.

本文标签： javascriptHow to use Chrome Extension Api with AngularStack Overflow