Question

我正在为 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;
});

允许用户将项目添加到上下文菜单 - chrome 扩展

0 个答案: