I'm trying to work on a chrome extension and am trying to clean up some of my code by relying on the sendMessage. However the callback function activates before the page has finished loading so in the case of a new tab, nobody receives and in the case of an existing tab the page that is being moved from is getting the message (but that isn't what I want). I've looked for other people asking about that problem with new tabs and there wasn't a clear answer, the best suggestion I've seen is to create a global variable and create a listener for tab loads and compare it against this global variable.
So the question is, is there a way to wait in the callback function until the page has loaded, or do I create an array of JS objects that contain the tab I'm waiting on and the information I want to send to that tab.
For reference here is the relevant code in the background javascript file.
chrome.tabs.sendMessage(tab.id, {info: "info"}, function(response)
{
//This line isn't used when I am navigating without changing tabs
chrome.tabs.create({url: response.info.linkUrl}, function(tab1)
{
chrome.tabs.update(tab1.id, {url: response.info.linkUrl}, function(tab2)
{
chrome.tabs.sendMessage(tab2.id, {info: "More Info"});
});
});
});
Otherwise I am able to confirm that all of my tab side code works, once my sendMessage was delayed enough for me to see that with my own eyes. My code is able to consistently make it past validation on the page being navigated away from, confirmed by checking document.url.
You can try injecting a second content script instead of a message.
It will execute in the same context as your other script.
Something along the lines of
chrome.tabs.executeScript(tab2.id,
{code: 'showInfo("More Info);', runAt: 'document_idle'}
);
where showInfo does the same as your message handler.
It's a bit of a hack and I'm not 100% sure the load order will be correct.
Other possible solutions are more complex.
For example, you can make the content script report back that it is ready and have a handler for that, for instance you can register a listener for onMessage in the background that waits for a message from that specific tab.id, sends "More Info" and then deregisters or disables itself.
Or, you could potentially switch to programmatic injection of your content script, which would let you control load order.
Related
When I click links on webpages, the script gets executed once, as expected, but when the webpage redirects the user (such as using history.pushState() the script gets executed twice, how can I stop this?
It's mind boggling that the history API doesn't make a difference between redirects and click on links, it reports them both as type link of transitionType.
The executeScript by default only executes on the top frame (frameId 0) so that's not the problem.
And I also used frameId and parentFrameId properties of the callback function although I knew it wouldn't fix the problem because as I've said, on clicking links, the script is executed only once, but when the browser redirects, it's executed twice.
BackgroundScript:
chrome.webNavigation.onHistoryStateUpdated.addListener(function(obj){
if (obj.frameId === 0 && obj.parentFrameId === -1){
chrome.tabs.executeScript({
file: 'js/contentScript.js',
runAt: 'document_end'
});
console.log(obj.transitionType);
}
});
ContentScript:
console.log("executed!");
onHistoryStateUpdated event is triggered not only on the browser back/forward actions but also when the site scripts use window.history methods so it can happen even 1000 times per navigation if the page calls the API that many times, there's no limit.
If the problem here is the multiple execution of the script you can simply send a message first and inject only if no response is received. Or use a global variable in the content script, see how to avoid dynamically injecting the same script multiple times when using chrome.tabs.executeScript.
I have a chrome extension, where I periodically throw out an alert based on something.
The thing is that the default alert in Javascript is very ugly and I am trying to replace it with something more beautiful.
The problem is that currently the alert is triggered from the background script. Google doesn't allow us to include any external libraries in the background html.
Given this problem, how do I go about replacing the default alert with a more modern UI alert?
I was looking to replace the default alert with something like the SweetAlert.
My background.js currently looks like this:
// on some alarm trigger
function showpopup() {
console.log(" in show popuup");
console.log(Date());
alert("ugly alert");
}
I also explored the option of injecting another js file from my background file.
function showpopup() {
console.log(" in show popuup");
console.log(Date());
var s = document.createElement('script');
// added "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
}
My script.js currently just calls an alert
alert("ugly alert now in script.js");
I am not able to figure out how to create my own dialog box in this javascript file script.js.
The problem is where your alert will be shown?
In an browser/OS dialog window? That's what alert() and friends do; as you see yourself, it's ugly and inflexible. In addition, it's technically challenging: it's an old mechanism that stops execution of JS code until closed, which can lead to API malfunctioning; Firefox WebExtensions specifically don't support calling this from the background page.
In the background page? By definition, it's invisible. You can add DOM nodes with an alert there, but you will not see it. Your problem isn't loading a library, your problem is where to display results.
(invisible, so no picture here!)
In the currently open tab? Hijacking an arbitrary page to show your own UI is hard, prone to break, would require draconian permissions with user warnings at install, won't always work. Wouldn't recommend.
In a fresh window? Possible (see chrome.windows API), but hardly "modern UI" at all (at least you can hide the URL bar).
In a browser action popup? Still not possible to trigger it to open in Chrome, so that's out.
The de-facto standard for informing the user about such things is the chrome.notifications API. It offers limited customization, but that's the "modern" approach considering that your extension has no UI surfaces already open at alert time.
You can insert your code into the tab content via
JS: chrome.tabs.executeScript()
CSS: chrome.tabs.insertCSS()
The second possibility would be to use a content script (content.js). But then you would have to use messaging to communicate between background.js and content.js.
I have a custom module that contains a button. The button click performs a process that sometimes takes 5-10 seconds to complete. Is there a way in Kentico to display a custom busy message like the "Loading" message that Kentico displays during lengthy processes? I would like to show the same "Loading" msg that Kentico shows with my own custom message.
If your module is built using the out of the box page templates and webparts, this is included by default. If it is not and you're using custom aspx template pages, you'll need to ensure that the page in inherited properly and add that in. You might want to reference another out of the box module which is using code already like the Users in the Membership module.
Yes, but it depends on how things are set up.
If the button executes an Ajax Panel (it does a postback through an ajax call), then you can capture the ajax call and put your loading message there.
<script type="text/javascript>
var AjaxHandler = Sys.WebForms.PageRequestManager.getInstance();
AjaxHandler.add_beginRequest(beginRequestHandler);
AjaxHandler.add_endRequest(endRequestHandler);
function beginRequestHandler(sender, args) {
// Waiting
}
function endRequestHandler(sender, args) {
// close waiting
}
</script>
If you have it postbacking on the page, you can try to put a hook when the button is clicked to show the waiting, when the page refreshes then the waiting will of course be gone.
$("#mybutton").click(function() {
// Waiting
});
I inject my content script using filtered events instead of manifest content-scripts match rules.
When I navigate to a target page, content script doesn't run always, but only sometimes. When it fails to run I refresh the page (sometimes more than once), untill the content script starts.
For simplicity, I don't want to put the code I know is working. onDOMContentLoaded is not always firing when the filter meets the condition.
var filtro = {'url': [
{hostSuffix: 'somedomain.com', pathPrefix: '/search'},
{hostSuffix: 'somedomain.org', pathPrefix: '/search'}
]};
chrome.webNavigation.onDOMContentLoaded.addListener(listener, filter);
chrome.webNavigation.onErrorOcurred.addListener (listener, filter);
So I added onErrorOcurred, to fire when the page fails to load. But I still missing something, because it doesn't execute every time (but it executes on refreshing the page).
As many other pages, this one trows a lot of error messages to console. I imagine some of these may prevent onDOMContentLoaded to fire, but I think it should fire onErrorOcurred. Am I missing some event?
It happens to me in many different extensions and pages when using filtered events.
Thank you very much.
I'm writing a chrome extension and have a question.
My extension has some .html page in it, let it be 'popup.html'. I inject a content script into some page and this script opens a 'popup.html' in a new tab with something like 'var p = window.open(chrome.extension.getURL('/popup.html'), "popup")', which works perfectly. Next, I need to pass some data to this window and I can't figure how to do it in a simple way.
For some reason I can't call child window's function from a content script with
var p = window.open(chrome.extension.getURL('/popup.html'), "popup");
p.foo(data);
In the console I see Uncaught TypeError: Cannot call method 'foo' of undefined message.
I can't pass data in a query string, because the data is simply too big.
Is there an elegant and simple way to pass data to such kind of window? I thought about messaging, but how do I effectively get tab ID of a newly opened window w/out using a background page?
Thanks a lot in advance.
UPD:
I tried to inverse the logic and get a data from parent window with 'window.opener.foo()' but in a newly opened tab window.opener returns null.
Ok, I found two solutions to my problem.
1) Add a background page, which opens a popup with chrome.tabs.create(). Then send a message from a content script to a background page, which re-sends it to a corresponding tab via chrome.tabs.sendMessage(). It looks a little ugly, but works.
2) A better one, w/out background page. Extension (popup) page creates a listener for long-lived connection. Then content script sends a message to this connection. A problem here is that a listener is not created right after the page is opened, so there should be a mechanism for a content script to wait until popup is loaded. It can be a simple setTimeout or a notification from popup via same long-lived connection.
If anyone has a better solution I'd gladly check it out as well.