В настоящее время я создаю простое расширение, которое может извлечь выделенный текст на странице Chrome, а затем записать выделенный текст в iframe, используя следующие коды:
popup.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
width: 400px;
height: 500px;
}
iframe {
width: 400px;
height: 500px;
}
</style>
</head>
<body>
<iframe frameborder="1"></iframe> <!--'1' for border on/ '0' for border off-->
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
chrome.tabs.executeScript( {
code: "window.getSelection().toString();"
}, function(selection) {
document.write(selection[0])
});
manifest.json
{
"manifest_version": 2,
"name": "txls_demo",
"description": "retrieve highlighted text then return the summarized result",
"version": "1.0.0",
"icons": {
"16": "favicon.png",
"48": "favicon.png",
"128": "favicon.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "favicon.png",
"default_popup": "popup.html"
}
}
Эти коды успешно копируют выделенный текст и записывают его с заданным размером iframe.
Однако яЯ хотел бы воспроизвести те же функциональные возможности с response.js в расширении Chrome, поэтому попытался выполнить следующие коды внутри project dir после выполнения npx react create app project
manifest.json
"name": "txls_demo",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_icon": "favicon.png"
},
"permissions": [
"activeTab"
],
"version": "1.0"
}
App.js
import React, { Component } from 'react';
function Iframe(props) {
return (<div dangerouslySetInnerHTML={ {__html: props.iframe?props.iframe:""}} />);
}
const iframe = '<iframe frameborder="1" width="400" height="500"></iframe>';
class App extends Component {
constructor(props) {
super(props);
}
get_highlight() {
/*global chrome*/
chrome.tabs.executeScript( {
code: "window.getSelection().toString();"
}, function(selection) {
document.write(selection[0])
});
}
render() {
return (
<div className="App">
<Iframe iframe={iframe} />
{this.get_highlight()}
</div>
);
}
}
export default App;
Он каким-то образом успешно создается и хорошо отображает iframe с заданным размером, однако не может скопировать выделенный текст.
Какая модификация может решить проблему наиболее компактным способом?