How can I emit an event from content script to panel add-on script and vice versa? And how can I dynamically update the panel content. Please help. An example in this regard will be greatly helpful for beginners. The basic example given here is not working the example is:
var panel = require("panel").Panel({
contentScript: "self.port.emit('showing', 'panel is showing');"
});
panel.port.on("showing", function(text) {
console.log(text);
});
panel.show();
Nothing is shown in console
This example is given in Add-on SDK tutorial but still it is not working. Any one please Help?
That example works for me. I see the panel and I see the console.log messages.
Related
Do you know what could be causing the permissions request dialog on iOS to show behind the app? It actually flashes quickly and then goes behind. I have to press the home button to bring it to the front. Until then the UI is blocked.
I am using Everlive and I am calling the register method in the app's launchEvent as such:
var pushSettings = {
//iOS - specific settings
iOS: {
badge: true,
sound: true,
alert: true,
clearBadge: true
},
notificationCallbackIOS: function (userInfo) {
...
},
//Android - specific settings
android: {
projectNumber: '944301213976'
},
notificationCallbackAndroid: function callback(data) {
...
}
}
el.push.register(pushSettings, function (data) {
...
}, function (error) {
});
Thank you.
EDIT: I should add that I am testing on iOS 9.3.4 and right before the dialog goes behind the app, I get the following warning in the console: enabledRemoteNotificationTypes is not supported in iOS 8.0 and later. Not sure if it matters, but I wanted to mention it, just in case.
So, it turns out that it was a timing issue. I was running the code when the app was initializing. The popup will get displayed, but shortly after, the first screen (login in my case) gets initialized, stealing the focus from the popup.
Once I moved the code in a button tap event (after the screen loading was completed) everything worked as expected.
I am not sure if this is the best way to handle this. I am open for suggestions.
Also, you can see https://github.com/NativeScript/push-plugin/issues/38 for more info. Thank you Anton Dobrev for pointing me to the right direction.
I'm using a custom Modernizr build, v3.3.0. I've created a simple JSFiddle example to illustrate: https://jsfiddle.net/cqkg7x45/6/.
console.log(Modernizr);
will show the Modernizr object, and when I inspect it in the JS console I can see "videoautoplay" is a property with a value of "true".
But, when I do
console.log(Modernizr.videoautoplay)
it returns "undefined".
I was originally seeing this issue in a WordPress theme I'm developing, but was also able to recreate in JSFiddle and a separate stand-alone HTML page. Also, Modernizr is putting the "videoautoplay" class on my HTML tag, even when I know the device does not support that feature (iPhone 5).
Update: This issue appears to be happening in Chrome (v47.0.2526.106), but not Firefox (v43.0.2).
I'm going to answer my own question in case anyone else runs into this problem. I found the solution on this SO post: How do I detect if the HTML5 autoplay attribute is supported?.
Since this is an "async" test you can't access the property using the syntax
Modernizr.videoautoplay
You have to use the .on() function, as shown in the above SO post:
Modernizr.on('videoautoplay', function(result){
if(result) {
alert('video autoplay is supported');
} else {
alert('video autplay is NOT supported');
}
});
I've integrated a hangout button into my website. When I click it a child window is opened. Is it possible to make hangout opened in current tab or in a new tab (like a usual link does)?
I've looked through Hangout Button documentation but haven't found anything like this (while I believe I saw it somewhere over the Internet).
Update There was a couple of examples how you can specify a new hangout url without Hangout Button in the answers and comment. But no proves were provided that this is a reliable way and no documentation was provided about the ways to specify additional parameters (e. g. startDate for Hangout App).
Update 2 I've found that when you create a new hangout app Google Develope Console provides a Hangout link:
with the following url: https://hangoutsapi.talkgadget.google.com/hangouts?authuser=0&gid=appId. Does it work only for sandbox? Is there any way to specify other parameters like startData?
I use the following to open hangout in a new tab
<a target="_blank" href="https://plus.google.com/hangouts/_?gid=<app_id">Start a Hangout</a>
Use the query parameter gd=somevalue to pass your app an initial set of data
https://developers.google.com/+/hangouts/running#passing-data
I send start data like this
https://plus.google.com/hangouts/_?gid=<app_id">&gd=<start_data>
and also like this
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div id="placeholder-rr"></div>
<script>
gapi.hangout.render('placeholder-rr', {
'render': 'createhangout',
'initial_apps': [{'app_id' : 'Your app_id', 'start_data' : 'Put your start data here', 'app_type' : 'ROOM_APP' }],
'widget_size': 175
});
</script>
Checked the documentation, doesn't seem that the button is meant to be flexible with configuration.
If you're looking for a coding solution apart than:
gapi.hangout.render('placeholder-div', {
'render': 'createhangout',
'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
'widget_size': 200
});
Deferred execution and language configuration:
window.___gcfg = {
lang: 'zh-CN',
parsetags: 'onload'
};
not much can be done.
On the manual side, holding ⌘ (CTRL on windows) while clicking on the button will open the hangout in a new tab instead.
Tested successfully on Chrome and Safari.
Unsuccessful on Firefox.
There is a plain link button available:
https://hangoutsapi.talkgadget.google.com/hangouts/_?gid=APP_ID
You can simply open this link in a new tab:
Hangout
General Questions
Hello! I'm delving into the world of Chrome Extensions and am having some problems getting the overall workflow down. It seems that Google has recently switched to heavily advocating Event Pages instead of keeping everything in background.js and background.html. I take part of this to mean that we should pass off most of your extension logic to a content script.
In Google's Event Page primer, they have the content script listed in the manifest.json file. But in their event page example extension, it is brought in via this code block in background.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });
What are the advantages of doing it one way over the other?
My Code
I'm going forward with the programatic way of injecting the content script, like Google's example.
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Let's get this sucker working",
"version": "0.0.0.1",
"permissions": [
"tabs",
"*://*/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png"
}
}
background.js
chrome.browserAction.onClicked.addListener(function() {
console.log("alert from background.js");
chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
console.log("jquery Loaded");
});
chrome.tabs.executeScript({file: "content.js"}, function() {
console.log("content loaded");
});
});
content.js
console.log('you\'r in the world of content.js');
var ans = {};
ans.createSidebar = function() {
return {
init: function(){
alert("why hello there");
}
}
}();
ans.createSidebar.init();
I am able to get the first 3 console.log statements to show up in the background page's debugger. I'm also able to get the alert from content.js to show up in any website. But I'm not able to see the console.log from content.js, nor am I able to view any of the JS from content.js. I've tried looking in the "content scripts" section of the background page debugger's Sources tab. A few other posts on SO have suggested adding debugger; statements to get it to show, but I'm not having any luck with anything. The closest solution I've seen is this post, but is done by listing the content script in the manifest.
Any help would be appreciated. Thanks!
Content scripts' console.log messages are shown in the web page's console instead of the background page's inspector.
Adding debugger; works if the Developer Tool (for the web page where your content script is injected) is opened.
Therefore, in this case, you should first activate the Developer Tool (of the web page) before clicking the browser action icon and everything should work just fine.
I tried to use the debuggermethod, but it doesn't not work well because the project is using require.js to bundle javascript files.
If you are also using require.js for chrome extension development, you can try adding something like this to the code base, AND change eval(xhr.responseText) to eval(xhr.responseText + "\n//# sourceURL=" + url);. (like this question)
Then you can see the source file in your dev tool (but not the background html window)
manifest v3
You can add console.log statements to your content scripts.
This is one of the best ways to debug an application.
Let's say you want to access a DOM node from the content script.
const node = document.querySelector("selector")
node will be Element instance if it exists else it will be null
If you can see the node in the Elements tab but not able to access it via content script then the node might have not been loaded at the time you accessed it.
Follow this answer to fix this issue.
I made a simple extension that contains a button, that when clicked, executes the following code:
chrome.experimental.clear.cache('everything', function() {
});
but the callback function never seems to get called. Am I using this API wrong or is it just broken?
Here's a link to the API doc for it:
http://code.google.com/chrome/extensions/experimental.clear.html#method-cache
Thanks!
The API has changed to chrome.experimental.browsingData.
I've just landed the documentation updates to go along with the code change: http://code.google.com/chrome/extensions/trunk/experimental.browsingData.html
Here's the most up to date documentation (chrome.browsingData.removeCache):
http://developer.chrome.com/trunk/extensions/browsingData.html#method-removeCache