Question

我正在尝试使用create-react-app在React中制作Chrome扩展程序。当我将扩展程序加载到Chrome，并且时钟检查弹出窗口以尝试让popup.html在控制台上运行时，它会在popup.js第1行告诉我“Uncaught SyntaxError：Unexpected identifier”，这是导入反应行。

从其他问题我相信问题是，当使用ES6时，我必须使用npm start运行应用程序，但是在尝试制作扩展而不是Web应用程序时，它会如何工作？有什么办法吗？由于我需要将解压缩的扩展加载到chrome中，那么npm如何开始帮助？

以下是相关文件：

manafest.json：

{
  "short_name": "Timer",
  "name": "Website Viewing Timer",
  "manifest_version": 2,
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "React Ext"
  },
  "permissions": [
    "tabs"
  ]
}

popup.html：

<h1>test</h1>
<script src="popup.js"></script>

popup.js：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class Timer extends Component {
  render() {   
    return <h1>hello</h1>;
  } 
}

ReactDOM.render(
  <Timer />,
  document.body
);

我刚刚接受了反应教程，所以我可能会遗漏一些明显的东西，但我感谢您的帮助。

Answer 1

好的，经过一些谷歌搜索后，我可以通过将属性type="text/jsx"添加到popup.html中的脚本标记来解决此问题。虽然我实际上不是100％确定为什么会这样。是因为我需要将popup.js标记为JSX文件才能让babel翻译它？

尝试使用React制作Chrome扩展程序时出现“Uncaught SyntaxError：Unexpected identifier”

1 个答案: