CODEWITHSUNDEEP
javascriptreactjsgoogle-chrome-extensiongoogle-chrome-devtools
Austin Wolfe
Austin Wolfe

Reputation: 399

Using chrome api with React.js

I've been trying to make a simple Chrome Extension using React. The manifest looks something like this: 

{
  "name": "New Tab",
  "version": "1.0",
  "manifest_version": 2,
  "description": "A minimalist replacement for Chrome's New Tab page.",
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "permissions": ["tabs", "topSites"]
}

I'm not sure how to actually use the Chrome topSites API in React. I've been looking at the documentation https://developer.chrome.com/extensions/topSites but it doesn't provide much insight. I'm trying to do something like this to get an array of data. 

chrome.topSites.get(console.log)

However, 

'chrome' is not defined  no-undef

Upvotes: 17

Views: 16389

Answers (6)

CleverlyDone
CleverlyDone

Reputation: 69

You need to install the proper types with: npm install @types/chrome --save-dev

Upvotes: 1

lpe234
lpe234

Reputation: 31

yarn add @types/chrome -D or npm install @types/chrome --save-dev

@types/chrome contains type definitions for Chrome extension development (http://developer.chrome.com/extensions/).

Upvotes: 2

Yanjan. Kaf.
Yanjan. Kaf.

Reputation: 1755

So it appears putting /*global chrome*/ on top of file works, but I would like to explain why it works -

First of all you are using React, and the eslint configuration of React is hidden internally and by default the no-undef rule is enabled, so you can not use the undefined variable chrome in order to allow this you have to tell eslint to let it allow compilation even if chrome is undefined.

It has nothing to do with react or typescript, its an es-lint issue.

Here I will show you an example on eslint playground -

enter image description here

Upon running the code above I will get that console is not defines, and the reason for that is eslint is unaware of console API

You have various options to resolve the issue -

  1. You can add browser if you are using browser in the env, but in your case you can use webExtensions to true
  2. you can define globals in config file, using {"global" : {}} as also mentioned in another answer.
  3. temporarily you can do /* global your_identifier */

Right thing to do would be change your env in eslint config as follows

 "env": {
        "webextensions": true
    }

For more visit

Upvotes: 6

Yumin Gui
Yumin Gui

Reputation: 462

Above answers are correct, but they fix the issue on a per-file basis.

If you need to fix this issue once and for all, please add this to your eslint config:

module.exports = {
  ...otherConfigs,
  globals: {
    chrome: true
  }
}

Upvotes: 2

Mansi Teharia
Mansi Teharia

Reputation: 1077

You can define chrome by adding /*global chrome*/ in the top of the file.

For Example 

    /*global chrome*/
import React, { Component } from 'react';
import './App.css';

    class App extends Component {
        componentWillMount() {
            chrome.storage.local.set({ 'data' : 'Your data'}, function(result) {
                console.log(" Data saved ")
            });
        }

        render() {
            return (
              <div className="App">
              </div>
            );
        }
    }

    export default App;

Upvotes: 38

Ivor
Ivor

Reputation: 640

You need to disable the ESLint rule no-undef and then enable it again:

/* eslint-disable no-undef */
function callback(val) {
    console.log(val)
}

chrome.topSites.get(callback);
/* eslint-enable no-undef */

Upvotes: 1

Related Questions