Chrome extesnion add text to Editable with context menu

I am trying to add text to an editable field with a context menu.

I tried to follow this SO but I cannot seem to get it to add the text to the field.

This is my content, which seems to make sense. I believe it is adding the context for what the background script is looking for.

var clickedEl = null;

document.addEventListener("mousedown", function(event){
    //right click
    if(event.button == 2) {
        clickedEl = event.target;
    }
}, true);

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request == "getClickedEl") {
        sendResponse({value: clickedEl.value});
    }
});

And here is what I have for my Background script. This is the part where I am not sure if I am doing it correctly.

function onClickHandler(info, tab) {
  if (info.menuItemId.indexOf("context") > -1) {
    var type = info.menuItemId.replace('context', '');
    theLog = type;

    function mycallback(info, tab) {
        chrome.tabs.sendMessage(tab.id, "getClickedEl", function(clickedEl) {
            elt.value = theLog.value;
        });
    }

  }
}

Testing Chrome Extension with Context Menu

I am working on a Chrome Add On that adds context menu items using chrome.contextMenus.

I am looking to create some tests as I develop the extension to ensure proper functionality. I have looked into using Selenium and similar, but there does not seem to be the concept of interacting with the “system” context menu, only context menus which are actually JavaScript called by intercepting right clicking. The solutions for the browser’s real context menu seem a bit hacky.

I am starting to look at things like autohotkey and AutoIt, but I am not sure that these are the best tools out there for this type of testing since Chrome doesn’t use native Windows controls.

I see there is some work with AutoIt Chrome UDF, but I wanted to check if there was a purpose built tool that can consistently interact with the browser. I also want to check that other tabs are open, etc.


I have read How do I test a context menu entry in a Chrome Extension? -> Select an Option from the Right-Click Menu in Selenium Webdriver – Java , but I am not sure how this would work if you don’t know which menu items might be present from other extensions or customizations.

Unable to send message from context menu to content script

I want to send a message to the content script, when the user selects a context menu item. The content script will then, based on the message, format the webpage as required.

I was unable to do so and I have been able to locate the problem to the code responsible for sending the message (in the context menu script) or the one responsible for receiving message (in the content script). Below, I try to present a simplified version of the code that tries to duplicate the problem:

backgroundContextMenus.js:

chrome.runtime.onInstalled.addListener(function(){
    chrome.contextMenus.create({"title": "Testing",
                                "contexts": ["selection"],
                                "id": "testing"});
});
chrome.contextMenus.onClicked.addListener(function(info, tab){
    console.log("testing works");
    console.log("Before sending the bold message");
    chrome.tabs.sendMessage(tab.id, {changeParameter: "bold"});
    console.log("After sending the bold message");
});

markr.js:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse){
        console.log("Text toggled bold");
    }); 

Upon selecting the context menu item, the console shows these messages:

backgroundContextMenus.js:75 testing..
backgroundContextMenus.js:77 Before sending the bold message
backgroundContextMenus.js:79 After sending the bold message

So, as you may notice, there is no log saying “Text toggled bold”. Therefore, I suspect that there must be something wrong with the code responsible for sending message (chrome.tabs.sendMessage(tabs[0].id, {changeParameter: "bold"});)

I tried to follow this answer but it gives the same problem.

I am unable to figure out what exactly is wrong with it. It would be of great help if you could help me figure it out.

Open a new tab with xpath as search query

I am writing a chrome extension wich adds a context menu that when clicked opens a new google maps tab with a xpath value as search query.

xpath

//*[@id="component-1028"]/b

background.js

/* Create a context-menu */
chrome.contextMenus.create({
id: "GoogleMaps",   // <-- mandatory with event-pages
title: "Open On Google Maps",
contexts: ["all"]
});

/* Register a listener for the `onClicked` event */
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (tab) {
    /* Inject the code into the current tab */
    /* chrome.tabs.executeScript(tab.id, { code: code }); */
    chrome.tabs.executeScript(tab.id, {file: "content_script.js"});
}
});

content_script.js

window.open("http://maps.google.com/maps?q="+document.evaluate('//*[@id="component-1028"]/b', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML;, '_blank');

But the content script doesn't seem to work with the document.evaluate added. But it works fine with something like this:

window.open("http://maps.google.com/maps?q="+, '_blank');

is it possible to add xpath value as a search query?

Thanks.

chrome.contextMenus.create with dynamic items

I want to build a chrome extension that has a menu with some items based on what you click on.

i use chrome.runtime.onConnectExternal to pass the date, everything works fine in here. but as the messaging between extension and site is done async some time the events come after the menu gets shown. and it dose not update after that.
the end result is that some times you see the menu based on the old item that was right clicked.

Is there a way to refresh the menu while open. or a way to comunicate between site and extension in a sync way?

Here is a example showing menu not updating:

const test = chrome.contextMenus.create({
    'title': `menu 0`,
    "contexts": ['all'],
});

let index = 0;

setInterval(() => {
    chrome.contextMenus.update(test, {title: 'menu ' + index++})
}, 1000);

Simple Chrome extension: Open image in CMS using file name in url

In my strides to make work more efficient for my colleagues I’m trying to make an extension that enables editors to open images directly from front end, a task our CMS can’t do.

The idea: When editors see an image they need to edit, they right-click and chose “Open in CMS”. The extension picks up the filename (including file extension) and opens a new url in our CMS.

Example:
Front end image url is http://www.justsomeurl.com/something/product.jpg

Image in the CSM can be accessed using search so that https://cms.justsomeurl.com/admin/appsomething/search:product.jpg

As a start I have tweaked an extension for Google Image search using this code:

function getClickHandler() {
  return function(info, tab) {

    var url = 'https://cms.justsomeurl.com/admin/appsomething/search:' + info.srcUrl;

    chrome.windows.create({ url: url, width: 1024, height: 870 });
  };
}

/**
 * Context menu.
 */
chrome.contextMenus.create({
  "title" : "Find image in CMS",
  "type" : "normal",
  "contexts" : ["image"],
  "onclick" : getClickHandler()
});

This of course sends the full url into the CMS search so it doesn’t work. I have tried to combine it with another script I found:

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
alert(filename);

But since I basically have no idea what I’m doing it doesn’t work. Any help is greatly appreciated! Thanks!

Context Menu Extension using different queries based on selection

I want to write a Chrome/Opera Context menu Extension which uses different search queries for different selection using regex

chrome.contextMenus.create({
title: "Open: "%s" on Google Maps",
contexts: ["selection"],
onclick: searchText
});
function searchText(info){
var myQuery = encodeURI("https://maps.google.com/maps?q="+info.selectionText);
        chrome.tabs.create({url: myQuery});
}

I want to be able to use different queries if the selection text matches an IMEI for example and use another query if the text matches another regex

if(selection.match(/^[0-9]{15,15}|[,]$"/)) {
function searchText(info){
var myQuery = 
encodeURI("https://imeiquery.com/id="+info.selectionText);
        chrome.tabs.create({url: myQuery});
else if(selection.match(/^[0-9]{15,15}|[,]$"/)) {
function searchText(info){
var myQuery = encodeURI("https://maps.google.com/maps?q="+info.selectionText);
        chrome.tabs.create({url: myQuery});
}
}, true); 

The code above doesn’t really work. Is it possible?

Chrome Extension detect mouseover on context menu item

Is it possible to detect the mouseover event on the custom context menu item added with ‘chrome.contextMenus.create({…})’?

I want to kind of “preview” the action of the menu item when the user hovers their mouse over that menu item. So to do that I need to detect when the mouse is hovering over that item.

Is this possible?

Is it possible to listen to the “Copy Link Address” event in Chrome?

Chrome’s context menu offers a "Copy Link Address" option whenever you right-click on an appropriate element. I’m wondering if there’s an event that a listener can be added to in order to do things when a User performs that context menu action. I’ve tried all of the following to find the event, but none of these are triggered by the "Copy Link Address" action:

[
  'copy',
  'copyLink',
  'copy_Link',
  'copyAddress',
  'copy_Address',
  'copyLinkAddress',
  'copy_Link_Address'
].forEach(eventName => {

  addListener(eventName);

  const lowerCasedEventName = eventName.toLowerCase();
  if (eventName !== lowerCasedEventName) {
    addListener(lowerCasedEventName);
  }
});

function addListener(eventName) {
  document.addEventListener(eventName, function(e){
    console.log({eventName, e});
  }, true);
}

The “Copy” command is triggered by the copy listener, but none of these seem to be triggered by "Copy Link Address"

How to get the selected text to contextmenu title in chrome

Any idea how to get the selected text value to title field in chrome context menu item like google does with their context menu search here? window.getSelection() doesn’t seem to work.

here is an example of what I would like to implement