Displaying the icon in the bottom right corner

[alexz006]

What do you think about having the icon and editor appear in the bottom right corner of the browser? Since GPT is not always necessary, the icon can also interfere near the cursor.

[soulhighwing]

planning to add a context menu and option to choose between icon or right click menu.

[alexz006]

When you add the contextual menu option, it would be good for it to be constant rather than only appearing when text is highlighted, so that the editor can be called at any time.

[alexz006]

You may do it your own way, but my implementation of the context menu may be helpful to you :) For version 1.4.4.

manifest.json

"permissions": [ "storage", "contextMenus" ],

add to background.js

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        "title": 'ChatGPT [%s]',
        "contexts": ["all"],
        "id": "ChatGPTcontextMenu"
    });
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
  chrome.tabs.sendMessage(tab.id, {action: "openEditor"});
});

add to content.js

async function openEditor() {
    document.getElementById("popupwindow").style.display='';
    await Promise.all([loadProfiles(), loadOptions()]);
    var selection = window.getSelection().toString();
    document.getElementById("customizeEdit").value = selection;
    if(autosubmit=='checked')
        makeStreamApiCall(); 
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "openEditor") {
    openEditor().then(sendResponse);
    return true;
  }
});

When selecting the text, I also placed an icon in the bottom right corner. And I centered the editor window on the screen. To do this, change content.js:

Comment out this code:

document.addEventListener("mouseup", function(event) {
...
    //icon.style.left = (event.pageX+5) + "px";
    //icon.style.top = (event.pageY+5) + "px";

Change to this:

function CreateIcon(){
...
    icon.style.position = "fixed";
    icon.style.right ="10px";
    icon.style.bottom = "10px";
...
// and comment out this code:

    //document.getElementById('popupwindow').style.left = event.pageX + "px";
    //document.getElementById('popupwindow').style.top = event.pageY + "px";

Change to this:

function CreatePopupWindow(){
...
    popup.style.position = "fixed";
    popup.style.left = "50%";
    popup.style.top = "50%";
    popup.style.transform = "translate(-50%, -50%)";

Thank you for a very useful module! Best of luck! :)