I have a Firefox addon. I created a beautiful panel widget with HTML and CSS. Now, I just need to get my scripts working from the panel widget. I try to redirect the current tab to the new url that is specified in the button value like below:
<button class="myBtnClass AllBtnStyles" value="www.example.com/info">Info</button>
I got this script in my file also;
$(".myBtnClass").click(function () {
window.content.location.href = $(this).attr('value');
});
But on button click the current tab gets redirected to
resource://jid0-ulah35kcypxsda4kbau4uierkjw-at-jetpack/add-on-name/data/www.example.com/info
you cannot change tab in panel's content script, you need to pass the address to add-on script.
So, in your panel's script:
$(".myBtnClass").click(function () {
self.port.emit("changeTab", $(this).attr("value"));
});
In your add-on script, you need to listen to the port event: (assume your panel is named panel)
panel.port.on("changeTab", function(url) {
var tabs = require("tabs");
tabs.open(url); // open the url in a new tab
});
See documentation on port at https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/guides/content-scripts/using-port.html
Related
Is there a way, using Google Sites, to open html links in the same window?
I want to avoid the Buttons Widget because their customization is very limited.
Already tried this and it didn't work
Google.com
And
<a href="" onclick="Window.open('https://www.google.com','_parent')" >Google.com</a>
By the way, on Google Sites, when you insert a HTML widget, it will create an IFRAME. I would like to be able to open a link on the same window from this Iframe.
set target value to _self if you want to open the link in the same tab,
set it to _blank to open in a new tab or window. I hope you find this useful
You can open a url in another tab in the browser by click of a button or menu option.
I'm giving the below code which I use for a menu option "Help" which opens a google doc in another tab in same browser window. It works for any browser.
//
//
function openUrl( url ){
var html = HtmlService.createHtmlOutput('<html><script>'
+'window.close = function(){window.setTimeout(function(){google.script.host.close()},9)};'
+'var a = document.createElement("a"); a.href="'+url+'"; a.target="_blank";'
+'if(document.createEvent){'
+' var event=document.createEvent("MouseEvents");'
+' if(navigator.userAgent.toLowerCase().indexOf("firefox")>-1){window.document.body.append(a)}'
+' event.initEvent("click",true,true); a.dispatchEvent(event);'
+'}else{ a.click() }'
+'close();'
+'</script>'
// Offer URL as clickable link in case above code fails.
+'<body style="word-break:break-word;font-family:sans-serif;">Failed to open automatically. Click here to proceed.</body>'
+'<script>google.script.host.setHeight(40);google.script.host.setWidth(410)</script>'
+'</html>')
.setWidth( 90 ).setHeight( 1 );
SpreadsheetApp.getUi().showModalDialog( html, "Opening ..." );
}
//
//
function open_help(){
openUrl("https://docs.google.com/document/d/..../edit");//this is the help file Google Doc
}
//
//
var self = require("sdk/self");
var tabs = require("sdk/tabs");
var button = require("sdk/ui/button/action").ActionButton({
icon: "./icon16.png",
label: "Test Button",
onClick: function() {
tabs.activeTab.attach({
contentScriptFile: ['./content.js']
});
}
});
I am attaching a content script file to the active tab by a toolbar button click.
How can I know if the content script is already attached to the activeTab or not? I do not want to add multiple content scripts to the tab. If there is any attached content script, I need to remove it.
Toggle button does not help me. Button does work tab specific way.
.attach returns a worker. Put it in a Map with the tab object as key. If there already is an entry present for that tab, don't attach.
I've written a Chrome extension that overrides the New Tab page:
manifest.json:
"chrome_url_overrides": {
"newtab": "new-tab.html"
},
Is there a way to make this override optional? That is, I'd like to enable the user to uncheck a checkbox in the options page and disable the New Tab override. This must be possible because when I open a new tab for the first time, there's a popup informing of an extension changing the New Tab settings and asking whether to keep changes or restore settings:
I couldn't find any API for controlling overrides. The New Tab Redirect project doesn't have an option to display the native New Tab.
Google made a Star Wars new tab replacement which allows you to view the default new tab page. The url it uses is chrome-search://local-ntp/local-ntp.html.
Example:
options.html:
<input type="checkbox"> Use default new tab page
options.js:
var checkbox = document.querySelector("input[type=checkbox]")
checkbox.addEventListener("click", function() {
chrome.storage.sync.set({ defaultnewtab: checkbox.checked })
})
newtab.js:
chrome.storage.sync.get("defaultnewtab", function(storage) {
if(storage.defaultnewtab) {
chrome.tabs.update({ url: "chrome-search://local-ntp/local-ntp.html" })
}
})
Instead of using the chrome_url_override you could write a listener that listens for when tabs update using the chrome.tabs.onUpdated.addListener(), then check if the url is chrome://newtab/ and if it is and the check box is ticked, then using chrome.tabs.update() relocate them to another page.
Using the Star Wars method as described #Daniel Herr, I did this, which is working well. Although feels a little hack-y.
I have an option being set in the popup.html whether the Extension is "on" or not.
First off, set the default new tab page using the Chrome defined method:
manifest.json
"chrome_url_overrides": {
"newtab": "newtab.html"
},
Then in your Extension's newtab.html call a new JavaScript file, newtab.js (or whatever).
I am also using jQuery, so my code uses that, but you can do this natively using DOMContentLoaded.
newtab.js
$(document).ready(function(){
// It takes a moment for the Chrome query/update so sometimes there is a flash of content
// Hiding the Body makes it look blank/white until either redirected or shown
$('body').hide();
var background = chrome.extension.getBackgroundPage();
var _app = background._app;
// App is OFF, show Default New Tab
if(!_app._on){
// Get the current Tab
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
var active = tabs[0].id;
// Set the URL to the Local-NTP (New Tab Page)
chrome.tabs.update(active, { url: "chrome-search://local-ntp/local-ntp.html" }, function() { });
});
// App is ON, show custom content
} else {
$('body').show();
}
});
Basically, the methodology is to update the Tab so that it is redirected to chrome-search://local-ntp/local-ntp.html which is the hard URL to the default Chrome NTP.
Since this is a Chrome internal URL -- the URL field still appears blank.
I am trying to open up a new tab from within an IFrame. I am trying to make the triggered click event appear as if it has being initiated from outside the IFrame.
page.html
<div>
<iframe src="page1.html">
</iframe>
page1.html
link
The above will open a new tab if clicked by user but I require the tab to open automatically.
<script>
parent.window.open( '/path_to_other_page', '_blank' ); //will open a new window rather than tab but could be blocked
$(function()
{
$("#link_to_other_page")[0].click(); //opens in new window How do make the
//click appear to be initiated from outside the iframe so a new tab opens?
});
</script>
QUESTION:
How do I simulate clicking the link so the click appears to be initiated from outside the iframe?
############
link
You don't need javascript for that.
Note that you cannot force though whether the browser opens a new window or a new tab. That is on the browser (and user through the browsersettings) to decide.
First of all, both the main page and the iframed page should exist within the same domain.
Then, assuming that your link inside the iframed page has already the target="_blank" attribute, which it's needed (as it was already pointed out in previous answers) like :
link
... you could add this script to the main page :
jQuery(document).ready(function ($) {
$("#myIframe").load(function () {
var link = document.getElementById("myIframe").contentDocument.getElementById("link_to_other_page");
$(link)[0].click();
});
}); // ready
... or if you prefer the jQuery way
jQuery(document).ready(function ($) {
$("#myIframe").load(function () {
var link = $("#myIframe").contents().find("#link_to_other_page");
$(link)[0].click();
});
}); // ready
Consider
you may need to set an ID to your <iframe> tag (#myIframe) so you can manipulate it.
you use the .load() method to make sure you won't attempt to trigger the click before the iframe is completely loaded.
you don't need to set any javascript inside the iframed page.
See DEMO
NOTE: In my demo I used setTimeout() to trigger the click after 5 seconds so it will be more obvious.
IMPORTANT : as it was previously mentioned, it's up to the browser how to open the page. Chrome opens as pop up (as if you were using window.open()) any link where a click event if programmatically set (a manual click will open the page in a new tab though) while Firefox opens it in a new tab.
Give ID to the Iframe and try the below code:-
<script type="text/javascript">
$(document).ready(function () {
$("#iframeID").load(function () {
var ifr = document.getElementById("iframeID")
var anchors = iframeID.contentDocument.getElementsByTagName("a");
for (var i in anchors) {
anchors[i].setAttribute("target", "_blank");
}
});
});
</script>
hope it helps
You could dummy in a link and "click" it in the parent window. It should react a bit more "natively".
<script>
$(function() {
var link_html = $("#link_to_other_page").html();
parent.window.$(link_html)[0].click();
});
</script>
See http://jsbin.com/wifeba/1/ for the full example.
In a Firefox extension using jetpack, I have a panel with a contentScript attached. The panel is set to initially display an URL. If the panel changes its location (through a click on a link or a document.location=), I can't emit messages to the contentScript anymore (it raises an ERR_DESTROYED, "The page has been destroyed and can no longer be used.").
Is there a way to keep my contentScript working (or at least reload it) when the location changes? Or should I avoid changing location totally an only manipulate the original panel content?
Here's a minimal script showing the behavior:
exports.main = function (options, callbacks) {
panel = require("panel").Panel({
contentURL: "http://stackoverflow.com/",
contentScript: 'self.port.on("foo", function() { console.log("foo received"); });'
});
widget = require("widget").Widget({
id: "test-panel",
label: "test panel",
contentURL: "http://stackoverflow.com/favicon.ico",
panel: panel
});
panel.on("show", function() {
panel.port.emit("foo");
});
};
Got an answer from Myk Melez on the Jetpack google group:
For now, you should avoid changing the
panel's location and only manipulate
the original panel content, since
there isn't a way to keep the content
scripts working. But we should
probably make the panel's content
scripts get reloaded when its location
changes.
Or, as lcamacho said, I can use an iframe inside the panel.