Chrome扩展程序上下文菜单仅适用一次 [英] Chrome extension context menu only works once

问题描述

我正在编写我的第一个Chrome扩展程序，它使用上下文菜单（右键单击并显示选项）。当突出显示文本并从右键单击菜单中选择ExtensionName选项时，它会打开一个新选项卡，并将其作为查询传递给我的组织拥有的目录。问题是它只能使用一次。当文本突出显示并右键单击时，上下文菜单中的选项仍然显示，但选择ExtensionName选项无法生成具有目录结果的另一个选项卡。

我希望用户能够在浏览器会话中多次使用此功能，就像大多数其他Chrome扩展程序一样。在Chrome扩展菜单中重新加载扩展程序可修复此问题。我认为它与我的后台脚本 rightclick.js 中发生的事件处理有关。我不熟悉JavaScript中或Chrome上下文中的事件处理，所以任何帮助将不胜感激。

manifest.json

  {
name：ExtensionName，
description：右键单击要搜索给定目录的文本。 ，
manifest_version：2，
version：1.0，
permissions：[contextMenus]，
图标：{
 16：icon-bitty.png，
48：icon-small.png，
128：icon-large.png
}，
background：{
scripts：[rightclick.js] 
} 
} 
  

rightclick.js

  var selection_callbacks = []; 
 
 chrome.extension.onMessage.addListener（function（request）{
 var callback = selection_callbacks.shift（）; 
 callback（request）; 
}）; 
 
 
 function getSelection（callback）{
 selection_callbacks.push（callback）; 
 chrome.tabs.executeScript（null，{file：selection.js}）; 
}; 
 
函数createDirectoryRequest（selectText）{
 var form = document.createElement（form）; 
 form.setAttribute（method，post）; 
 form.setAttribute（action，目录的URL到此为止）; 
 form.setAttribute（target，_blank）; 
 
 var hiddenField = document.createElement（input）; 
 hiddenField.setAttribute（id，search_generic_search_terms）;）; 
 hiddenField.setAttribute（name，search [generic_search_terms]）; 
 hiddenField.setAttribute（value，selectText）; 
 form.appendChild（hiddenField）; 
 document.body.appendChild（form）; 
 form.submit（）; 
 
 
 $ b chrome.contextMenus.create（{title：'ExtensionName'％s''，
 contexts：[selection]，
 onclick：function（info，tab）{createDirectoryRequest（info.selectionText）;}}）
  

选择。 js

  chrome.extension.sendResponse（window.getSelection（）。toString（））; 
  

我知道这可能不是一个困难的问题，我只是非常新的东西，所以任何帮助将不胜感激。感谢。

解决方案

这里的问题是，您尝试使用不同的值多次提交表单。根据多次提交不同值的HTML表单，您所要做的就是让您的表单的目标独特值并在提交表单之前打开一个新标签：

rightclick.js

< pre class =lang-js prettyprint-override> var i = 0;

函数createDirectoryRequest（selectText）{
var form = document.createElement（form）;
form.setAttribute（method，post）;
form.setAttribute（action，目录的URL到此为止）;

//每个表单的唯一目标;在新标签中打开它
form.setAttribute（target，window+ i）;
window.open（目录的URL到此处，窗口+ i）;
i ++;

var hiddenField = document.createElement（input）;
hiddenField.setAttribute（id，search_generic_search_terms）;）;
hiddenField.setAttribute（name，search [generic_search_terms]）;
hiddenField.setAttribute（value，selectText）;
form.appendChild（hiddenField）;
document.body.appendChild（form）;
form.submit（）;
}


请注意，您只能创建一个表单，并且只需在提交之前更改其属性，而不是每次创建一个全新的表单：

var i = 0;

var form = document.createElement（form）;
form.setAttribute（method，post）;
form.setAttribute（action，目录的URL到此为止）;

var hiddenField = document.createElement（input）;
hiddenField.setAttribute（id，search_generic_search_terms）;）;
hiddenField.setAttribute（name，search [generic_search_terms]）;
form.appendChild（hiddenField）;
document.body.appendChild（form）;

函数createDirectoryRequest（selectText）{
form.setAttribute（target，window+ i）;
window.open（目录的URL到此处，窗口+ i）;
i ++;

hiddenField.setAttribute（value，selectText）;
form.submit（）;
}


I'm writing my first Chrome extension, it uses context menus (right-click and options come up). When text is highlighted and the ExtensionName option is selected from the right-click menu, it opens up a new tab and passes that as a query to a directory that my organization has. The issue is that it only works once. The option in the context menu still appears when text is highlighted and right-clicked, but selecting the ExtensionName option fails to produce another tab with the directory results.

I would like to for the user to be able to use this as many times as needed in a browser session, just like most other Chrome extensions. Reloading the extension in Chrome extension menu fixes the issue. I assume it has something to do with the event handling that occurs in my background script rightclick.js. I'm not as familiar with event handling in JavaScript or in the context of Chrome, so any help would be appreciated.

manifest.json

{
    "name": "ExtensionName",
    "description": "Right-click text to search the given directory.",
    "manifest_version": 2,
    "version": "1.0",
    "permissions": ["contextMenus"],
    "icons": {
        "16": "icon-bitty.png",
        "48": "icon-small.png",
        "128": "icon-large.png"
    },
    "background": {
        "scripts": ["rightclick.js"]
    }
}

rightclick.js

var selection_callbacks = []; 

chrome.extension.onMessage.addListener(function (request) { 
    var callback = selection_callbacks.shift(); 
    callback(request); 
});


function getSelection(callback) { 
    selection_callbacks.push(callback); 
    chrome.tabs.executeScript(null, { file:"selection.js" }); 
};

function createDirectoryRequest(selectText) {
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "THE URL FOR THE DIRECTORY GOES HERE");
    form.setAttribute("target", "_blank");

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("id", "search_generic_search_terms);");        
    hiddenField.setAttribute("name", "search[generic_search_terms]");
    hiddenField.setAttribute("value", selectText);
    form.appendChild(hiddenField);
    document.body.appendChild(form);        
    form.submit();

}

chrome.contextMenus.create({title: 'ExtensionName "%s"', 
                    contexts:["selection"], 
                    onclick: function(info, tab){ createDirectoryRequest(info.selectionText); }})

selection.js

chrome.extension.sendResponse(window.getSelection().toString());

I know this probably isn't a difficult problem, I'm just incredibly new to this so any help would be appreciated. Thanks.

解决方案

The issue here is that you're trying to submit a form several times with different values. Based on Submitting HTML form multiple times with different values, all you have to do is to give the target of your forms a unique value and open a new tab prior to submitting the form:

rightclick.js

var i = 0;

function createDirectoryRequest(selectText) {
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "THE URL FOR THE DIRECTORY GOES HERE");

    // unique target for each form; open it in a new tab
    form.setAttribute("target", "window" + i);
    window.open("THE URL FOR THE DIRECTORY GOES HERE", "window" + i);
    i++;

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("id", "search_generic_search_terms);");        
    hiddenField.setAttribute("name", "search[generic_search_terms]");
    hiddenField.setAttribute("value", selectText);
    form.appendChild(hiddenField);
    document.body.appendChild(form);        
    form.submit();
}

Note that you could create only one form, and simply change its attributes before submitting, rather than creating a brand new form every time:

var i = 0;

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "THE URL FOR THE DIRECTORY GOES HERE");

var hiddenField = document.createElement("input");
hiddenField.setAttribute("id", "search_generic_search_terms);");        
hiddenField.setAttribute("name", "search[generic_search_terms]");
form.appendChild(hiddenField);
document.body.appendChild(form);   

function createDirectoryRequest(selectText) {
    form.setAttribute("target", "window" + i);
    window.open("THE URL FOR THE DIRECTORY GOES HERE", "window" + i);
    i++;

    hiddenField.setAttribute("value", selectText);    
    form.submit();
}

这篇关于Chrome扩展程序上下文菜单仅适用一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！