我目前正在构建一个简单的扩展程序，该扩展程序可以在chrome页面中检索突出显示的文本，然后使用以下代码在iframe中写下突出显示的文本：
<div class="form-group">
<label for="editAppointmentContact" class="col-sm-2 control-label">Customer Name</label>
<div class="col-sm-10">
<select class="form-control select2contact" id="editAppointmentContact" ></select>
</div>
</div>
<!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>
chrome.tabs.executeScript( {
code: "window.getSelection().toString();"
}, function(selection) {
document.write(selection[0])
});
这些代码成功复制了突出显示的文本，并以给定的iframe大小书写了这些文本。
但是，我想在chrome扩展中使用react.js再现相同的功能，因此在执行{
"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"
}
}
后尝试在project dir内遵循以下代码
npx react create app project "name": "txls_demo",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_icon": "favicon.png"
},
"permissions": [
"activeTab"
],
"version": "1.0"
}
它以某种方式成功构建，并在给定大小的情况下很好地呈现iframe，但是无法复制突出显示的文本。
哪种修改可以最紧凑的方式解决问题？