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.
Related
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
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 have recently created a extension for devtools, which adds a new ExtensionPanel on devtools. Since this panel is useful only on certain pages, I wanted to show it conditionally depending on contents of current page. I can create a panel dynamically,depending on context of the page, but I was unable to find any way to close it (I've tried window.close() and panel itself doesn't have any methods like this).
So my question: Is there any way to close ExtensionPanel programmatically?
This is not supported by DevTools at the moment -- if you add a panel or sidebar, it's for the life of DevTools front-end. All stock DevTools panels are displayed unconditionally and the rationale for the lack of API methods to remove panels is to avoid confusion created by panels coming and going. If a panel is not applicable to the page being inspected at the moment, you can perhaps display a banner explaining why it's not applicable.
After many hours of research, I've seen multiple ways to do similar things. But I don't want to pigeonhole myself into approaching this in the wrong way, so I would appreciate any advice on how to achieve the following.
When clicking on my extension icon, I want to load a toolbar onto the current page. This toolbar has a number of links and forms that can:
Interact with the original page (DOM Listeners, changing the DOM)
Create additional extension popups on the original page
Make requests to external resources
From a JS perspective, I think it would be easiest to inject all my own HTML directly on the page and handle functionality via one content script. I abandoned that approach after realizing I'd never be able to account for all CSS conflicts in my popups.
So instead, this is what I have so far. When clicking on my Extension icon, I inject a div into the current page and load up an iframe sourced to a popup.html via chrome.extension.getURL('popup1.html'). This is where I get stuck. By loading my content into an iframe, I have isolated any CSS issues. But say I have text selected on the parent page and I click a button in my popup1.html. Is there then a way to pass the selected text back to the popup1.html or to show that selected text in a new popup2.html?
I hope that once I get the workflow down on how to do this kind of interaction I can move on with development. Thanks for your help!
is it possible to replace the action of an existing item in the context menu in Chrome. Simple example, every time I press "Inspect Element", it opens another developer tool extension instead of the default.
It is not: at the moment, devtools APIs only function if the web inspector is open. There's no mechanism to open the web inspector for a user, it has to be her explicit choice.
That said, it sounds reasonable to give an extension the ability to hook into an element's context menu. That might be a good idea for an extension to the existing devtools or Context Menu APIs. Would you mind filing a request at http://new.crbug.com/? I'll make sure it lands in the correct queue.