将 chrome api 与 React.js 结合使用

Question

我一直在尝试使用 React 制作一个简单的 Chrome 扩展。清单看起来像这样：

{
  "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"]
}

我不确定如何在 React 中实际使用 Chrome topSites API。我一直在查看文档https://developer.chrome.com/extensions/topSites，但它没有提供太多见解。我正在尝试做这样的事情来获取一组数据。

chrome.topSites.get(console.log)

但是，

'chrome' is not defined  no-undef

Answer 1

您可以通过在文件顶部添加

/*global chrome*/

来定义 chrome。

例如

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

所以看起来将

/*global chrome*/

放在文件顶部是有效的，但我想解释一下为什么它有效 -

首先你使用的是 React，React 的 eslint 配置是隐藏在内部的，默认情况下 no-undef 规则是启用的，所以你不能使用

undefined

变量

chrome

为了允许你这样做，你必须告诉 eslint 让其允许编译，即使

chrome

未定义。

它与

react

或

typescript

无关，它是一个es-lint问题。

在这里我将向您展示 eslint Playground 上的一个示例 -

运行上面的代码后，我会发现控制台未定义，原因是

eslint

不知道

console

API

您有多种选择来解决问题 -

1. 如果您在环境中使用浏览器，则可以添加

   browser

   ，但在您的情况下，您可以使用

   webExtensions

   为 true
2. 您可以使用

   {"global" : {}}

   在配置文件中定义全局变量，如另一个答案中也提到的。
3. 暂时可以做

   /* global your_identifier */

正确的做法是在 eslint 配置中更改

env

，如下所示

 "env": {
        "webextensions": true
    }

更多参观

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

Answer 3

您需要禁用 ESLint 规则

no-undef

，然后再次启用：

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

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

Answer 4

yarn add @types/chrome -D

或

npm install @types/chrome --save-dev

@types/chrome

包含 Chrome 扩展开发的类型定义 (http://developer.chrome.com/extensions/)。

Answer 5

以上答案是正确的，但它们修复了每个文件的问题。

如果您需要一劳永逸地解决此问题，请将其添加到您的

eslint

配置中：

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

Answer 6

您需要安装正确的类型：

npm install @types/chrome --save-dev