Modifying link bubble in Google Documents (via Google Apps Script)

Question

In my add-in for Google Docs (written in Google Apps Script), I want to add custom links to certain parts of the text in the document (which is easy to do), and I'd like these to have a different "link bubble" (the small temporary tooltip-like pop-up window) when the cursor is placed into such a text. That is: the default link bubble version shows the link and options to modify/remove the link. I want to have just a custom name and no option to modify/remove link.

I do not think this is possible via documented options, and so far I can only think of two workarounds. The first is to use bookmark notation for the link so that I can give it really any custom text (such as "# My own link bubble text"). However, this still allows modification/removal of the link.

The other option is to manipulate the HTML DOM, hence a much more generic solution (but which would solve my issue too). This has been asked here, and so far the answer is that it's not possible. However, it must be possible because at the very least Zotero has implemented this. They successfully access and modify various HTML elements of the Google Doc editor, including the link bubble. However, I do not understand how they can do this. I can easily modify the DOM of my add-in's sidebar, but not the editor's.

For example, in the following code, if I use it in my add-on script (client side code), body { background:red; } makes the body of my sidebar red, but .kix-appview-editor { background:green !important; } makes no difference. However, this is not a mistake in the code, because if I enter the very same lines in the console with the Google Docs editor open, the editor's background changes to green. (I've tried various other manipulations as well, but all had this same result.) So it would seem that Google somehow prevents this sort of hacky solution working from Google Apps Script – but then, again, how did Zotero get away with it?

const addCSS = css => document.head.appendChild(document.createElement("style")).innerHTML = css;
addCSS(
    `
    body { background:red; }
    .kix-appview-editor { background:green !important; }
    `
); 

In any case, I'd welcome any ideas for solving the link bubble modification question (with or without DOM manipulation).

Answer 1

You can't modify the Docs editor DOM from within Apps Script.

You could do so by creating a browser extension. That's what Zotero's connector is. A browser extension has access to the entire DOM on the page, not just the sidebar DOM as you do from Apps Script.

However, as noted in the Zotero code comments, you have to be mindful that if Google changes the editor DOM, your browser extension may break.