I have to fix our legacy firefox extension codes into WebExtensions, and I found those code on that.
var appcontent = document.getElementById("appcontent");
if (appcontent) {
appcontent.addEventListener("DOMContentLoaded", myfunction,
true);
}
Debbuging on this, appcontent always be null and There is no 'appcontent' Element on our solution.
I googled about 'appcontent' , then I found those description.
Extensions that attempt to overlay onto the "appcontent" box try to float chrome over document content will no longer display that material. You should update your extension to use the new panel XUL element. If you wish to keep the panel from automatically disappearing after a delay, you can set the noautohide attribute to true.
So I replaced 'appcontent' into 'panel' but it doesn't work, then what should I use instead of 'appcontent' ?
Related
In Chrome Devtools, you can break javascript on changing a DOM element's attributes, or on subtree modifications of an element.
I'm working on some legacy code that has some javascript that scrolls to the top of the page under certain situations, and I want to find the JS that does this.
Is there a way, in Devtools, so break on scroll events?
It could be jQuery or Prototype.js or event base JS that does it, and I've searched the codebase for .scrollTop or .animate, and I've found plenty of those, but none that are causing my issue.
I have no additional idea about actually breaking than the ones presented.
But i suspect it is not scrolling that causes the issue, but a '#' in the html.
x
is a very common pattern. when you forget (or something prevents) the "return false", the # (empty anchor) will be navigated to, which causes a scroll to top.
Check if the url has a # at the end after clicking!
You can inject this line of JS using the console to trigger the debugger when the scroll position changes programatically.
window.__defineSetter__("pageYOffset", function(){
debugger;
});
Then, view the call stack to see what triggered it.
If you don't want to activate the debugger, you can print the stack trace istead with the following code:
window.__defineSetter__("pageYOffset", function(){
console.log(new Error().stack);
});
Another option is to replace the windows scroll, scrollTo and scrollBy method with your own.
window.__defineGetter__('scroll', function(){
console.log('window.scroll getter :' + new Error().stack);
return function(x,y){
debugger; //or print stack trace
oldScroll(x,y);
}
});
Repeat for scrollTo and scrollBy.
I am creating a Safari Extension Bar and was wanting to have multiple Links in it and by clicking on the link have a popover specific to that link appear.
So far I have found these:
https://developer.apple.com/library/archive/documentation/Tools/Conceptual/SafariExtensionGuide/AddingPopovers/AddingPopovers.html
https://developer.apple.com/documentation/safariextensions/safariextension/1635377-popovers
However everything seems to be referring to using them with toolbar items, not extension bars.
I was wondering if it is even possible to make popovers work with links in an extension bar and if so if someone could point me in the right direction with this.
Sure, why not? Here's some sample code to get you started.
Say your extension bar has a couple of links like this:
Open Popover 0
Open Popover 1
(Not the most elegant way to run some JavaScript when you click a link, but whatever.)
Furthermore, say you have a single toolbarItem (toolbar button) and you want a different popover to pop up under it depending on which link on the bar you click. The openPopover function can be as simple as this:
function openPopover(pid) {
var tbItem = safari.extension.toolbarItems[0];
var thisPop = safari.extension.popovers.filter(function (p) {
return p.identifier == pid;
})[0];
tbItem.popover = thisPop;
tbItem.showPopover();
}
Since the extension bar has access to the global safari object of your extension, it can directly manipulate toolbarItems and open popovers, without having to pass messages to the global page. Indeed, your extension may not need a global page at all.
I have TinyMCE 4.0 in the page and when I select the text and try to paste it via CTRL+V, I get an error message saying that "Clipboard access not possible." This happens in IE8/9. However the same works fine in Chrome. Is there any workaround for this to get this working in IE?
Bounty:
I've tried resetting all IE settings (via Internet Options->Advanced->Reset All...) on two different computers, both running IE9, and one has the problem while the other does not.
Ultimately, I need to be able to paste formatted text (often with bullets or numeric lists and such) into TinyMCE and have it format them correctly. For this, I'm using the paste plugin, which seems to be throwing the error.
It seems to me that you're using an older TinyMCE 4 version, so in my opinion you should first do an upgrade to the latest version (4.0.3).
I've checked the source code of such version and I've found no trace of the Clipboard access not possible error message, which seems instead to be present in an earlier version of the tinymce/plugins/paste/plugin.min.js file, and only for Internet Explorer:
e.ie ? o.on("init", function () {
var e = o.dom;
o.dom.bind(o.getBody(), "paste", function (n) {
var r;
if (n.preventDefault(), a() && e.doc.dataTransfer)
return c(e.doc.dataTransfer.getData("Text")), t;
var i = u();
e.bind(i, "paste", function (e) {
e.stopPropagation(), r = !0
});
var s = o.selection.getRng(),
f = e.doc.body.createTextRange();
if (f.moveToElementText(i.firstChild), f.execCommand("Paste"), d(), !r)
return o.windowManager.alert("Clipboard access not possible."), t;
var p = i.firstChild.innerHTML;
o.selection.setRng(s), l(p)
})
}
Not being able to find an unminified version of this script, I can't say why such code fails, nor can I explain why it works only on one of your's computers.
In Internet Explorer's Tools menu, choose Internet Options.
Click the Security tab.
Click Trusted Sites.
Click the Sites... button.
Type your domain name (for example, widgetdesigns.com) in the first field, then click Add.
Unselect the checkbox that says Require server verification (https:) for all sites in this zone.
Click OK to apply your change.
Back on the Security tab, confirm that Trusted Sites is still selected, then click the Custom Level button.
Scroll down the Security section (near the bottom) and check the Disable box below Allow Programmatic clipboard access. (Checking this box will disable the access alert only for sites in your Trusted Sites list.)
Click OK then OK again to apply your changes.
What about this? Does this work?
What is the proper way to close an ExtJS tab programmatically?
I need to make this work in IE6; although remove'ing the tab from the TabPanel works, I see an IE warning: This page contains secure and unsecure items... When I click the X on the tab, I do not see this warning. So, clearly something clever is happening when I click the X.
Note: the warning occurs when I use tabPanel.remove(aTab, true) and it does not occur when I use tabPanel.remove(aTab, false). So, the mixed content warning is displayed during the removal and subsequent destruction of the panel.
Does it make sense to simulate the click on a tab?
EDIT
IE is telling me I have mixed SSL content when I don't
Are you removing the tab's element directly, or are you removing the tab component from its container? E.g.:
Ext.fly('tab-id').remove(); // Element API
vs.
myTabPanel.remove('tab-id'); // Panel API
Both should work OK in terms of nuking the tab markup, but removing the element directly may have undesirable consequences. If you are doing the latter (correct), then I'm not sure what the issue might be. I don't have IE 6 handy myself.
This closes a tab by clicking the middle button of your mouse.
var middleClick = $(document).mousedown(function(e) {
if(e.which == 2){
var tabPanel = <%= tabPanel.ClientID %>;
var activeTab = tabPanel.getActiveTab();
if (e.target.textContent == activeTab.title) {
var activeTabIndex = tabPanel.items.findIndex('id', activeTab.id);
tabPanel.remove(activeTabIndex);
}
}
return true;
});
Hope it helps!! =)
I'm developing a firefox extension based on this tutorial which is a FF 2.0 extension (second part of the tutorial is at this url)
The main thing that is important is that it uses
<iframe id="contentview" src="http://www.ibm.com/developerworks/web" flex="2"/>
In the backend code, when clicking the GO button, this happens:
contentview.contentDocument.location.href = urlbox.value;
//Use Firefox XPath to get the raw text of the document
var doctext = contentview.contentDocument.evaluate(
"string(.)", document, null, XPathResult.STRING_TYPE, null).stringValue;
I get an error with the xpath, but that's not my question. The issue I have with FF 3.0 is that the contentDocument value refers to the old site loaded, not to the one loaded by the href-change.
So my question is: how can I create a similar window, but be notified someone when the loaded document is complete, so I can access its DOM?
Updated:
first you need to handle the load event of the window then you add an event listener to the iframe element
window.addEventListener("load",Listen,false);
function Listen()
{
var frame = document.getElementById("contentview");
frame.addEventListener("DOMContentLoaded", DomLoadedEventHandler, true);
}
function DomLoadedEventHandler() {
var frame = document.getElementById("contentview");
alert(frame.contentDocument.location.href);
}
replace "DomLoadedEventHandler" with your event handler name.
I recommend that you take a look at the official site of Mozilla to learn everything about Firefox extensions
http://developer.mozilla.com