CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
John-Henry
John-Henry

Reputation: 1817

Context Menu array?

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?

Upvotes: 0

Views: 171

Answers (2)

Robbi
Robbi

Reputation: 1507

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
})

Upvotes: 1

Robbi
Robbi

Reputation: 1507

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
 })

Upvotes: 1

Related Questions