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

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;

Answer 2

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