My question is regarding this update (https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html) from May 2021 that affects our chrome extension, that we are just finding out about now.
We have a Chrome Extension that we wrote in 2020 that needs to manipulate the DOM to highlight passages of text in google docs documents. This has obviously stopped working because Google Docs have switched from DOM to Canvas.
We did some digging around and looks like this extension here - WriQ - (https://chrome.google.com/webstore/detail/wriq/kfkohpkagbjoncihbogfnjnddimfbgea), when installed and activated, seems to force the document to switch from Canvas to DOM mode. I could be wrong, but that's the impression I get when I do this:
When I don't have WriQ installed and activated, $(".kix-paragraphrenderer") in the console of a Google Docs document page returns null - meaning the Google Doc renderer is using the new default Canvas mode.
When I have WriQ installed and activated, (and refresh the Google Docs page if already open) $(".kix-paragraphrenderer") in the console of a Google Docs document page returns an element - meaning the Google Doc renderer is switching to DOM mode.
Can anyone explain this? Is there a way to programatically trigger the DOM mode? That's what WriQ seems to be doing.
You can try setting window._docs_force_html_by_ext = <extension-id>. That will force Google Docs to render the HTML DOM instead of Canvas.
Google is whitelisting some applications which can use a script forcing the document to a HTML Fallback version which reminds of the time before canvas or as an Annotated Canvas which makes it possible to make extension integrations with the SVG canvas.
You need to apply for whitelisting to access these features:
https://docs.google.com/forms/d/e/1FAIpQLScFxMgvXlq2KMsp0UIM66pvThTF1hpojiXQTqyq9txW79OWag/viewform
Related
I'm interested in creating a Chrome Extension which lists all the elements on the webpage that have an 'id' attribute in a menu. Then, when the user clicks on the element in the menu, the corresponding element on the webpage is highlighted.
I saw Chrome devtools highlights an element when you right click and inspect on it. I'm curious if there is some highlighting API accessible from DevTools? If not, how does one highlight elements similar to how devtools does it?
You can use the exact API that Chrome DevTools are using. You will need to call highlightQuad or highlightNode via debugger API. You can even specify the color and you can be certain that the highlight will render correctly and not interfere with the website (injecting an 'overlay' node, as Xan suggested, doesn't guarantee that). On the other hand, it will be much trickier to get right and user won't be able to use both your extension and DevTools at the same time (there can be only one debugger API connection). This code should get you started.
Chrome API does not provide access to such highlighting; you'll need to implement it yourself with an overlay.
Chrome API does provide access to the same functionality as DevTools if you use the debugger API. See this answer for details.
Before Chrome 63 (2017-12-06), writing a DevTools extension (i.e. using devtools.* APIs to display UI in DevTools) and using debugger at the same time would've been impossible, as only one instance of a debugger protocol client was allowed at once. This has changed, so now it's a viable answer, even if the documentation for chrome.debugger API wasn't updated yet.
Even though it's now possible, be aware that debugger API is an API with heavy warnings (adding it after publication may auto-disable installed extensions - needs testing).
Below is the original answer:
You can implement the highlighting yourself with an overlay.
You can study how it's usually done by looking, for example, at the element picker of uBlock Origin.
In short, that method creates an SVG overlay using, among other things, getBoundingClientRect() of the elements selected.
I need to know how i can insert menu-item into YouTube context-item using Google chrome extension.
I searched for that a lot and i found similar question but no any persuasive answer.
I need the solution very much.
The chrome extension API includes a Context Menu feature, but since the YouTube player uses Flash, there is a completely separate context menu that Chrome does not have direct control over.
So it is not possible to customize the context menu with the Chrome API. However, you may be able to get by with a (somewhat hacky) solution, such as covering the video with a transparent HTML DOM element. The DOM element should trigger Chrome's context menu instead of the Flash context menu.
When launching the Chrome Extension Google-Hangouts, a panel initially appears that lists members and a link/button to create a new Hangout.
This panel is initially pinned to the bottom right of the browser window. When pinned like this, it remains always on top as a browser navigation session continues: users can go to different URLs, change tabs, etc. and that panel stays at the bottom right and stays on top of all other windows (or at least on top of the main browser window).
Once it's unpinned, you can drag it around the window, but it no longer stays always on top.
My question is, how was that achieved - what code, or what functions, do i need to call to create that window/panel so that it stays initially pinned and always on top? Is there some binding to some native code that's involved? Some other approach?
If anyone know and can show or explain, i would be hugely grateful as this feature is key to an extension i'm trying to build.
Thanks a lot!
This may not be an answer but to get a clue of what is happening I extracted the crx file to view its content there are a few OS specific files : ace.dll , libace.so and ace. After researching a bit i found this. This is a plugin. Hangouts extension is using ace plugin which is actually running on your desktop(i'm not sure about this). You can check this article
I found this related post: How to build an chrome extension like Google Hangouts
ACE is actually not what makes the window, Chrome has that capability built in, apparently. Even if you don't enable panels, extensions from Google can still make them, provided your OS is capable.
I just saw jsFiddle today and am wondering that is there a FireFox addon that provides jsFiddle like features. Especially when you enter the html and css, jsFiddle shows you a layout of the page. Is there any addon that shows such layout for "offline viewing"? I use Firebug but there isn't such layout. Does somebody know about it?
Not a firefox add-on, only in the interest of self-promotion:
I have created a Vim script with similar (but at the moment very limited) functionality: vimfiddler. Vim integrates with selenium to drive a browser. Provides a jsfiddlerish experience running locally on your own computer.
In Google Chrome you can edit every element of the page. Just open a new tab, hit F-12 and edit to your heart's desire. Add some css or javascript to the head tags, put whatever HTML you want in the body, and you're good to go.
This add-on sounds like what you need : https://addons.mozilla.org/en-us/firefox/addon/devtools-prototyper/?src=ss
Just install it, open the devtools, then switch to the "Prototyper" tab.
Basically I am currently doing some research, and I am interested to find out how I could render web pages without a browser: I have some algorithms that I would like to run to calculate the visual aspect of each blocks of DOM node(s) for each page.
What you're asking for basically, is a browser rendering engine, otherwise known as a layout engine... For example, Firefox uses the Gecko layout engine to render the pages. Theoretically, you could adopt this engine for whatever project you're working on, saving you a lot of time.
The Gecko engine is used in more projects than just Firefox, and since it's open source, you could easily get the source code and try to throw it in an application.
Wikipedia has a nice list of layout engines, so there are other alternatives to Gecko, like GtkHTML.
Basically, you want to create the data structures a browser internally creates so that it knows how to render the page.
Check out the Firefox source.
I suspect it's rather complex.