如何使用React组件覆盖Chrome新标签页内容

Question

我正在尝试创建一个React应用程序/ Chrome扩展程序，该扩展程序将覆盖Google Chrome浏览器中新标签页的内容。我用过create-react-app，只是想用App.js内容覆盖新标签的内容。文件夹结构直接从下面的初始create-react-app开始。

    build
    node_modules
    Public
      favicon.ico
      index.html
      logo192.png
      logo512.png
      manifest.json
    src
      App.css
      App.js
      app.test.js
      index.css
      index.js
      logo.svg
    ..
    ..

我的manifest.json文件看起来像这样。

    {
      "name": "..",
      "author": "..",
      "version": "1.0.1",
      "manifest_version": 2,
      "description": "..",
      "chrome_url_overrides": {
        "newtab": "index.html"
      }
    }

这是我的index.html外观。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

我的index.js文件看起来像这样。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

我尝试插入以下内容，但收到空白页。

<script src="../src/index.js"></script>

如何使用App.js覆盖新标签的内容？

Answer 1

需要对我的manifest.json文件进行以下修改。

{
  "name": "..",
  "author": "..",
  "version": "1.0.1",
  "manifest_version": 2,
  "description": "..",
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "content_security_policy": "script-src 'self' 'YOUR HASH'; object-src 'self'"
}

YOUR HASH可以从控制台找到，如下突出显示

如何使用React组件覆盖Chrome新标签页内容

问题描述投票：0回答：1

1个回答

最新问题

如何使用React组件覆盖Chrome新标签页内容

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1