Related
On clicking the option on context menu (of my chrome extension) I want to show a modal on the page, which contains a form.
How do you implement this?
What I have found implemented right now:
I can easily describe a form in contentScript.js and inject it.
Problems I have found:
Defining the elements to be injected in javascript is tedious. (isn't there a better way)
Website's CSS interferes with my injected elements
Possible solutions I have found:
Shadow-DOM so that website's CSS does not interfere with the injected element.
Example:
Pocket Chrome extension is exactly the type of action I want to build and it doesn't user shadow-DOM. How does it do?
So I got this piece of code from my extension (I'm currently using webextension polyfill), it successfully creates the context menu and it's accessible when in foo.bar,
The issue is in the browser_action context menu, it's always there, I've specifically declared "page" as context when creating the contextMenu,:
browser.contextMenus.create({
id: "some-id",
title: "context menu message",
documentUrlPatterns: ["*://foo.bar/*"],
contexts: ["page"]
});
According to docs, I should add "browser_action" to make it appear in the browser_action context menu, however I've not included it yet always appear there, even if the current URL doesn't match documentUrlPatterns.
This only happens on chrome based browsers, it works perfectly in firefox.
devtools elements panel right click
look at the image above. right clicking on any node displays menu of options like 'add attribute' and 'edit attribute' etc...
I want to be able to extend the right click menu to add my custom events.
for example, I need to get the xpath of the node.
I know I can extend the right click on actual page instead of extending right click on the source of the page.
https://developer.chrome.com/extensions/devtools_panels#type-ElementsPanel
API's only supports selection change.
Unfortunately, the Extending DevTools API doesn't expose the context menu from the internal DevTools source code. Sometimes the API documentation omits some available functions/properties, so I confirmed this with:
alert(Object.getOwnPropertyNames(chrome.devtools.panels.elements));
It returned onSelectionChanged,createSidebarPane only, which matches the documentation.
The WebInspector object in the DevTools source code has a populateNodeContextMenu function on WebInspector.ElementsTreeElement.prototype, but this cannot be accessed through the Extending DevTools API. It is completely separate.
My DevTools extension injects script into the inspected window in order to parse and receive messages from-- normally on page load, but also when DevTools is first opened.
The relevant line in the background page is as follows:
chrome.tabs.executeScript(message.tabId,{ file: 'insert.js', runAt: 'document_idle' },function(results){console.log(results);});
This line normally displays [null] in the background console upon success-- and is successful both when opening DevTools in docked state, and when a user navigates to a new URL with DevTools in any state. It's only not working when DevTools is opened in an undocked state; in that case, the call is failing silently and results is returning undefined.
Permissions are "tabs", "http:///", "https:///"; and again, it's only not working in this one very specific case.
Is this a known issue with a workaround or should I consider this a Chromium bug?
The test case of your bug report contains a typo.
he onMessage event listener in your event page expects the tab ID to be available as message.tabId:
chrome.tabs.executeScript(message.tabId,{ file: 'insert.js', runAt: 'document_idle' });
However, in the devtools page, the message is being sent as "tabID" (note: capital D).
chrome.runtime.sendMessage({type: 'newpageload',tabID: chrome.devtools.inspectedWindow.tabId});
Because message.tabId is undefined in the event page, Chrome defaults to inserting the content script in the active tab of the current window. When the developer tools is undocked, this tab is (coincidentally) identical to the inspected tab, so you did not notice the error.
When the devtools are undocked, the current window is the devtools. Since you cannot script the developer tools, nothing appears to happen. If you read the value of chrome.runtime.lastError in the callback of chrome.tabs.executeScript, you would have noticed that you're trying to insert the script in the wrong window.
After changing the "tabId" to "tabID", the test case works as expected.
I have a strange problem with a browser action icon in Chrome. There is a default icon for browser action defined in manifest. The icon is displayed correctly. Then in a background page, under some conditions, I call:
chrome.browserAction.setIcon({path:"green_32.png", tabId:request.tabId});
This icon blinks for a moment, and then changes back to the default icon. The active tab and its id passed to setIcon remain the same during all the process.
Can someone suggest an idea why this can happen?
The reason why the icon was reset to default state every time is because I called setIcon before the tab finishes loading and obtains "complete" state.
I guess there should be some information about this in documentation on tabs or on browser actions, but I didn't find it: the default icon is actually applied - by-design - to a specific page after it finishes loading. I moved the call setIcon into tabs.onUpdated handler, and now custom icon persists.
This contradicts to my former understanding that the browser action icon is set on a per tab basis, regarless to a page loaded into the tab and its state.
#KonradDzwinel kindly provided a simple extension to test the case (look at the comments). I changed its background.js script to demonstrate this behaviour:
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.browserAction.setIcon({path: 'gfx/icon2.png', tabId: tab.id});
});
To reproduce this behaviour, on any tab press the browser action icon to get it changed. Then refresh the page. As a result the browser action icon reset back to default.
If this behaviour is explained in some documentation, please, write this in comments, and I'll update the answer. From what I have read so far, I was convinced that default icon is set for new tab at its creation time, and then any changes to it are solely under extension's control.