我正在为 chrome 开发一个扩展,我需要允许用户使用选项页面添加一个项目。有人有这样做的想法吗?我试过一些代码,但没有人工作。我没有收到任何错误,但它不起作用。我认为这是听众的问题,但我不确定。
我还需要一种方法来允许用户编辑现有项目/预设的内容。
--options.js--
document.getElementById("create").addEventListener('click',function(){
console.log('asd');
chrome.runtime.onInstalled.addListener(function (){ //needs to resolve the enter of the function into the Listener
//the console doesn't report errores, so there is a problem with the comunication
for(var i=0;i<json.items.length;i++){
console.log('asd');
var item=json.items[i];
item.id="item "+i;
loaded_json.push(item);
chrome.contextMenus.create({
id: item.id,
title: "Preset "+ (i+1),
parentId:"mainitem",
contexts: ["editable"],
onclick: genericOnClick
});
json=[]+[{
"text": "Lorem ipsum sim dolor amet..."+i,
"display_name": "Preset" + i,
}]
}
});
chrome.contextMenus.onClicked.addListener(function (info, tab) {
console.log(info.menuItemId); //print clicked item to see if it works -- works
var clicked_item=loaded_json.find(obj=>{
return obj.id===info.menuItemId;
});
if(!clicked_item){ return; }
chrome.tabs.sendMessage(tab.id, {
action: 'paste-canned-reply',
text: clicked_item.text
});
});
})
--options.html--
<!DOCTYPE html>
<head>
<title>Extension Options</title>
</head>
<body bgcolor="#A5FA89">
<form>
<H2>Nuevo Preset</H3>
<H3>Escribir un nuevo titulo</H4>
<input type="text" id="titulo" required></input>
<H3>Escribir el contenido</H4>
<textarea id="contenido" required></textarea>
<BR>
<button id="create" >Crear</button>
<button id="save">Salvar</button>
<BR><BR>
<input type="reset">
</form>
<script src="options.js"></script>
</body>
</html>
--背景--
const json = {
"version": "0.1",
"items": [
{
"text": "Lorem ipsum sim dolor amet...1",
"display_name": "Preset 1",
},
{
"text": "Lorem ipsum sim dolor amet...2",
"display_name": "Preset 2",
},
{
"text": "Lorem ipsum sim dolor amet...3",
"display_name": "Preset 3",
},
{
"text": "Lorem ipsum sim dolor amet...4",
"display_name": "Preset 4",
}
]
}
var loaded_json = [];
function genericOnClick(info, tab) {
console.log("item " + info.menuItemId + " was clicked");
console.log("info: " + JSON.stringify(info));
console.log("tab: " + JSON.stringify(tab));
chrome.tabs.sendMessage(tab.id,{text: "genericOnClick is working"});
}
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({
id: "mainitem",
title: "Respuestas a3SIDES",
contexts: ["editable"],
});
for(var i=0;i<json.items.length;i++){
var item=json.items[i];
item.id="item "+i;
loaded_json.push(item);
chrome.contextMenus.create({
id: item.id,
title: "Preset "+ (i+1),
parentId:"mainitem",
contexts: ["editable"],
onclick: genericOnClick
});
}
});
// Reply to a onClicked event
chrome.contextMenus.onClicked.addListener(function (info, tab) {
console.log(info.menuItemId); //print clicked item to see if it works
var clicked_item=loaded_json.find(obj=>{
return obj.id===info.menuItemId;
});
if(!clicked_item){ return; }
chrome.tabs.sendMessage(tab.id, {
action: 'paste-canned-reply',
text: clicked_item.text
});
});
//--------------------------------------------------------------------//
chrome.contextMenus.onClicked.addListener(function (info, tab) {
console.log(info.menuItemId); //print clicked item to see if it works -- works
var clicked_item=loaded_json.find(obj=>{
return obj.id===info.menuItemId;
});
if(!clicked_item){ return; }
chrome.tabs.sendMessage(tab.id, {
action: 'paste-canned-reply',
text: clicked_item.text
});
});
}
--content.js--
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(JSON.stringify(request));
console.log("Uela"+sender, sendResponse);
// listen for messages sent from background.js
if (request.action === 'paste-canned-reply') {
console.log("Control Content"); /*CHECK IF THE CONTROL IS WORKING */
document.activeElement.value = request.text;
}
return true;
});