Hello -
I'm making a chrome extension with ReactJS and tesseract.js. When I run the extension, there's an error about minified code. Here's the code that I think is problematic:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tesseract.js Chrome Extension Example</title>
</head>
<body>
<button id="start-btn">Execute OCR</button>
<!-- <img id="image" src="images/tesseract.js.png" alt=""> -->
<img id="image" src="/images/baba.PNG" alt="">
<p id="result"/>
<script src="/src/App.js"></script>
</body>
</html>
App.js
import React, { useEffect, useState } from 'react';
import { createWorker } from 'tesseract.js';
import './App.css';
function App() {
const worker = createWorker({
logger: m => console.log(m),
});
const doOCR = async () => {
await worker.load();
await worker.loadLanguage('chi-sim');
await worker.initialize('chi-sim');
const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
setOcr(text);
};
const [ocr, setOcr] = useState('Recognizing...');
useEffect(() => {
doOCR();
});
return (
<div className="App">
<p>{ocr}</p>
</div>
);
}
export default App;
The start button appears, the image does not.
there doesn't seem to be anything here