I am creating a Firefox extension that is designed to place a button automatically on the toolbar that, when clicked, will open a web page in a new tab. I have used the code snippets from the Mozilla dev site but, when both are put together, only the button placement works. The button does nothing when clicked.
I don't know too much about javascript, so I have no idea what is going wrong here. The entire extension has passed all Mozilla validation checks with no errors and no warnings.
Here is the code. Any help you could offer would be greatly appreciated.
CustomButton = {
1: function installButton(toolbarId, id, afterId) {
if (!document.getElementById(id)) {
var toolbar = document.getElementById(toolbarId);
// If no afterId is given, then append the item to the toolbar
var before = null;
if (afterId) {
let elem = document.getElementById(afterId);
if (elem && elem.parentNode == toolbar)
before = elem.nextElementSibling;
}
toolbar.insertItem(id, before);
toolbar.setAttribute("currentset", toolbar.currentSet);
document.persist(toolbar.id, "currentset");
}
if (firstRun) {
installButton("nav-bar", "my-extension-navbar-button");
}
},
2: function () {
const url = "http://www.mysite.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
}
}
I am not very sharp at this, which is why I am asking the question here instead of searching for other examples, which make no sense to me. If someone could show me how to modify this specific code to do what I need it to do, I would be grateful.
This will work from FF 29, which will be released on April 2014
It adds an action-Button to the toolbar, once you click it it will load the http://www.example.com site in a new tab; if you prefer to load a new window use require("sdk/windows") instead.
Using the addon-sdk
var ui = require("sdk/ui");
var action_button = ui.ActionButton({
id: "my-button",
label: "Open example page!",
icon: "./icon.png",
onClick: function() {
require("sdk/tabs").open("http://www.example.com");
}
});
Related
I'm writing a chrome extension and from that extension i want to click on a particular anchor tag in a webpage on a particular website.
let helpRequestButton = document.querySelectorAll(".live-doubt-item-resolve.ng-scope a");
Using this query selector i'm able to get the anchor tag from the web page which looks like.
<a data-ga-label="resolve_now_live" data-ga-action="clicked" ng-if="helpRequestObj.item_type === 'Topic'" ng-click="claimLiveRequest($event, true, helpRequestObj.id)" target="_blank" class="content-heading ng-scope" data-ga-category="HelpRequestDashboardLive"> </a>
I just want to click on this tag using java script.
But helpRequestButton.click() dosent work.
I have tried the same solution with jQuery(did'nt work).
Also i tried to search a lot on web on how to simulate a mouse click and none of the solutions worked uptill now.
Just for refrence i'm giving the code snippet of my extension what chrome would call one the webpage is loaded. The button which i have to click is present on the web page.
let timeOut;
function stopTimeout() {
clearTimeout(timeOut);
}
function checkIncomingHelpRequests() {
let helpRequestButton = document.querySelectorAll(".live-doubt-item-resolve.ng-scope a");
console.log(helpRequestButton[0]);
if (helpRequestButton.length > 0) {
> ***// This is the place i want to click the button.***
// helpRequestButton.
//helpRequestButton.click();
}
}
function selectTag() {
// var object = document.querySelector(".main-class");
// console.log(object);
let liButton = document.querySelectorAll(".pointer.tab.ga-event-tracker")[0];
//let liButton = $("li.pointer.tab.ga-event-tracker")[0];
//console.log(liButton);
if (liButton !== undefined) {
liButton.click();
checkIncomingHelpRequests();
}
timeOut = setTimeout("selectTag()", timeOutInterval);
}
$(document).ready(function () {
selectTag();
});
Please help me. Thanks in advance.
I have a question to ask regarding vis.js popup option. Currently I am trying to implement it in react style so I was using https://github.com/crubier/react-graph-vis/tree/master/example as a starting point.
I realized that in src\index.js file I can add events array since I realize the select option is in there. However, when I do the following:
const events = {
select: function(event) {
var { nodes, edges } = event;
console.log("Selected nodes:");
console.log(nodes);
console.log("Selected edges:");
console.log(edges);
},
showPopup: function(event) {
document.getElementById('root').innerHTML = '<h2>showPopup event</h2>'+ JSON.stringify(params, null, 4);
}
};
I am not able to trigger the popup even at all. Inside the lib\index.js, I noticed that the code is supposed to loop over the events array:
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = Object.keys(events)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _eventName = _step2.value;
this.Network.on(_eventName, events[_eventName]);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
}
and I checked that vis.js has the popup option according to the documentation which can be found here: http://visjs.org/docs/network/
I am currently stuck on figuring out how to trigger the popup. There is a requirement to use react since the application will be based on it. It would be great if someone can point out what I did wrong.
Thanks in advance. XD
NOTE: This question is in regards to the github project that I am trying to build on top of. Therefore it is a little different because I am not taking a barebone vis.js
You are mixing things up. showPopup is an event, a function that is called when the popup is shown. You do not call it to show the popup.
To show the popup you simply hover over a node that has a title property.
Check out this fiddle I made (is in pure JS though): http://jsfiddle.net/56t9c0t4/
I am looking for a modified add document view using AddContentItemDialog .
i manage to set parent folder , Intro Text , title and documents properties with script adapter in Work Details
try {
var parentFolder = self.case.getCaseFolder();
self.addContentItemDialog = new AddContentItemDialog();
self.addContentItemDialog.setDefaultContentClass(prefix+"_Dumy01");
aspect.after(self.addContentItemDialog.addContentItemPropertiesPane, "onCompleteRendering", function() {
console.log("aspect.after(self.addContentItemDialog");
self.addContentItemDialog.addContentItemPropertiesPane.setPropertyValue("Test_1", "123");
self.addContentItemDialog.addContentItemPropertiesPane.setPropertyValue("DocumentTitle", "YYYYYY");
self.addContentItemDialog.set("title","This is New Add Doc Event");
self.addContentItemDialog.setIntroText("New Msg Can Be Set In this Tab");
}, true);
console.log("XX");
self.addContentItemDialog.show(parentFolder.repository,parentFolder,true,false, null, null, false, null);
}catch (exception) {
console.log("exception" + exception);
}
Now I am looking to make few Properties readonly after setting them up from script.
maybe like ,
self.addContentItemDialog.addContentItemPropertiesPane(Property).set("readOnly", "true");
Thanks
the fix for this was , to call this under "onCompleteRendering"
var fields = this._commonProperties._propertyEditors._fields;
for (var i = 0; i < fields.length; i++) {
if(_logic_){ //Like (fields[i].get('name') == (prefix+"_MainFileCategory"));
fields[i].readOnly = true;
fields[i].textbox.readOnly = true;
}
}
found idea from http://www.notonlyanecmplace.com .
If I got your question correctly, I am led to believe that your best option in that case would be EDS, it would be easier and more flexible. please check the link below from ECM community blog, giving a simple example that you can leverage to achieve similar results
Sample External Data Service for IBM Case Manager by Dave Hanson
Also, Please check the ICM 5.2 Redbook, which referenced Chapter 16 of the previous edition of the ICM Redbook (the ICM 5.1 edition): Download
Finally, This link from developerWorks is a straight forward white paper with sample code that I found very useful back when I started using EDS for case manager: Download
My extension opens in a new FF tab. I would like all toolbars(exept for tabbar) be hidden when the tab is active.
What I want is exactly how the standard FF addons tab works(tools->addons).
Copy paste this code into scratchpad with browser environment and run it:
Cu.import('resource://gre/modules/Services.jsm');
var sss = Cc['#mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
try {
sss.unregisterSheet(cssUri, sss.USER_SHEET);
} catch (ex) {}
var css = '';
css += 'toolbar { display: none }';
var cssEnc = encodeURIComponent(css);
var newURIParam = {
aURL: 'data:text/css,' + cssEnc,
aOriginCharset: null,
aBaseURI: null
}
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);
to remove just run the sss.unregisterSheet(cssUri, sss.USER_SHEET);
You didn't write what kind of extension you're developing... SDK or XUL.
In a XUL extension, first get all toolbars, then set collapsed according to your wishes.
Here is some same code.
function toggleToolbars() {
// First get all toolbars (that are not the tab bar)
var tbs = Array.filter(document.querySelectorAll('toolbar'), function (x) {
return x.id != 'TabsToolbar';
});
// For each toolbar
for (var tb of tbs) {
// Either un-collapse if we collapsed it.
if (tb.getAttribute('my-addon-collapsed')) {
tb.removeAttribute('collapsed');
tb.removeAttribute('my-addon-collapsed');
}
// Or collapse other-wise, if not already collapsed
else if (!tb.getAttribute('collapsed')) {
tb.setAttribute('collapsed', 'true');
tb.setAttribute('my-addon-collapsed', 'true');
}
}
}
You may wish to fixup the code to handle corner cases, such as the user manually restoring a toolbar, other add-ons add-on entirely new toolbars later and so on.
In an SDK add-on your will need to get to the actual browser.xul windows first. I'm sure how to do this is already somewhere on SO.
I am trying to combine ContentFlow (http://jacksasylum.eu/ContentFlow/) and ColorBox (http://www.jacklmoore.com/colorbox/): when the user clicks on an image in ContentFlow I want an HTML page to be displayed in ColorBox.
I have tried using the code provided by the ColorBox examples' section to no avail. The HTML page is loaded by the browser as a normal link (not in ColorBox.)
I have even tried creating a ContentFlow addon (using the LightBox addon as an example) without any luck - nothing is displayed, not even simple images:
onclickActiveItem: function (item) {
var content = item.content;
if (content.getAttribute('src')) {
if (item.content.getAttribute('href')) {
item.element.href = item.content.getAttribute('href');
}
else if (! item.element.getAttribute('href')) {
item.element.href = content.getAttribute('src');
}
if (item.caption)
item.element.setAttribute ('title', item.caption.innerHTML);
colorbox.show(item.element);
}
}
Edited on 01/Oct/2013
The problem only manifests itself when an item contains an href. To prove this I changed the code above to show a static web page:
$.colorbox({open:true, href:"http://mysite.gr/colorbox/content/static.html"});
It the item is just a simple image the static web page is displayed in ColorBox. But if the item contains an href to the web page I want displayed in ColorBox the browser follows the link and loads the specified page. Any ideas on how to stop this from happening?
Thank you in advance for your help!
I have finally solved the problem I have described in my question. The solution involves creating a ContentFlow addon as follows:
new ContentFlowAddOn ('colorbox', {
init: function () {
var colorboxBaseDir = this.scriptpath+"../colorbox/";
var colorboxCSSBaseDir = colorboxBaseDir;
var colorboxImageBaseDir = colorboxBaseDir;
this.addScript(colorboxBaseDir+"jquery.colorbox.js");
this.addStylesheet(colorboxCSSBaseDir+"example3/colorbox.css");
},
ContentFlowConf: {
onclickInactiveItem: function (item) {
this.conf.onclickActiveItem(item);
},
onclickActiveItem: function (item) {
var content = item.content; // ContentFlow's content class
var theItem = item.item; // ContentFlow's item class - if you need access to it
var hrefToDisplay = '';
if (content.getAttribute('src')) {
if (content.getAttribute('href')) {
hrefToDisplay = item.content.getAttribute('href');
}
else if (!item.element.getAttribute('href')) {
hrefToDisplay = content.getAttribute('src');
}
$.colorbox({iframe:true, href:hrefToDisplay, title:item.caption});
}
}
}
});
The secret is to open the HTML page in an iframe.
Hope this helps!