Using chrome api with React.js

Question

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

Philology

Answer 1

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;

Flaminius

Thank you so much for this. Was struggling with this for quite some time now. – Overlong

Thank you so much for help!! But I'm curious where you get the solution. The documentation? I don't see it in the docs. – Crayon

I don't remember it exactly but I think I found it on some stack overflow link only. Initially I thought its a comment but I tried it randomly and then I found it working so I posted the solution for others. – Flaminius

@Yumin Gui i found this SO link that maybe helpful #13973686 – Accordingly

Answer 2

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 -

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

• 1 - https://eslint.org/docs/latest/rules/no-undef
• 2 - https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-globals

Gregson

Answer 3

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
  }
}

Crayon

Answer 4

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 */

Tenebrous

Answer 5

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/).

Dougherty

Can you add an explanation as to what's happening and why it would answer the question? – Refraction

Answer 6

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

Melanson