Context Menu array?

Question

I have written a simple extension for a company website that reads the array of projects, and alerts the title of the project when I hover over it. This works perfectly, but it is not what I'm looking for:

let projects = document.getElementsByClassName("project-name");


extract_data = function() {
    let title = this.getElementsByClassName("project-name ng-binding")[0].getAttribute("title")
    alert(title);
};

 for (var i = 0; i < projects.length; i++) {
    projects[i].addEventListener('mouseover', extract_data, false);
}

I would like to slightly modify my code so that instead of alerting on mouseover, the alert is added as an option to the Chrome Context Menus. Something similar to:

 chrome.contextMenus.create({
     title: "Alert Project Title",
     contexts:["selection"],  // ContextType
     onclick: extract_data // A callback function
 });

This is not quite right because I need to change the context menu to be dependent on the project row, and as this is written now, there is no reference to projects for the Context Menu.

Is there any easy way to change my mouseover to become the value of the contextMenu?

Robbi · Accepted Answer · 2021-05-31 16:00:54Z

Perhaps I was too hasty.

If you want that the menù displays an items with the TITLE of selected project (not selected text) and if you want to move ALERT as single contextMenu item onclick event I think you HAVE A CHANCE!

But you have to inject a content script declaratively

/* in manifest.json */
...
"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["cs.js"],
    "run_at": "document_idle"
}]
...


/* in content script "cs.js" */
function extract_data() {
    var title = this.getElementsByClassName("project-name ng-binding")[0].getAttribute("title");
    chrome.runtime.sendMessage({'title': title}, resp =>
        console.log('backgroung script has received the message and send back this message: ' + resp.msg)
    )    
}
var projects = document.getElementsByClassName("project-name");
for (var i = 0; i < projects.length; i++)
    projects[i].addEventListener('mouseover', extract_data, false)


/* in background script */
function createMenu() {
    chrome.contextMenus.create({
        'id': '1',
        'title': 'Alert Project Title',
        'contexts': ["selection"],
        'documentUrlPatterns': ["<all_urls>"],
        'enabled': false
    }, _ => {
        if (chrome.runtime.lastError) {} else {}
    })
}
function handleInstalled(details) {
    createMenu()
}
chrome.runtime.onInstalled.addListener(handleInstalled);
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    chrome.contextMenus.update(
        '1',
        {
            "title": "Do you want to alert " + msg.title + " project title",
            'contexts': ["selection"],
            'documentUrlPatterns': ["<all_urls>"],
            "enabled": true,
            "onclick": _ => alert(msg.title)
        },
        _ => {
            sendResponse( {'msg': chrome.runtime.lastError ? 'Some error...' : 'Fine!' } )
        }
    )
    return true
})

NOTE: alert in background script works only in manifest V2. If you're building a MV3 extension you have to replace the alert with a notification otherwise you have to send a message from background to content script asking the last one to show that alert.

Robbi · Accepted Answer · 2021-05-31 08:45:27Z

1

If you want that the menù displays an items with the title of selected project I think you are out of luck. I don't believe there is a way to do it.

But If you want the menù displays an items with your selection try this.

 chrome.contextMenus.create({
    "id": "1",
     title: "Do you want to alert '%s' project title",
    "contexts": ["selection"],
    "documentUrlPatterns": [...],
     onclick: extract_data // A callback function
 })

answered May 31, 2021 at 8:45

Robbi

1,5272 gold badges11 silver badges12 bronze badges

Collectives™ on Stack Overflow

Context Menu array?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related