I'm trying to build a simple chrome extension which consists of one icon that when clicked, pops up the official twitter window (as in here). The problem with most extensions that do this is that the window remains open after. If, however, you include this script provided by Twitter , they take care of closing the window after a few seconds, and that is what I want to do, so I'm trying to inject that code and then executing the URL. (Keep in mind both my javascript and chrome extensions knowledge is very limited).
This is what I have so far.
function onClicked(tab) {
var twitterWidgets = document.createElement("script");
twitterWidgets.type = "text/javascript";
twitterWidgets.src = "https://platform.twitter.com/widgets.js";
var head = document.getElementsByTagName("head")[0];
head.appendChild(twitterWidgets);
var urlToTweet = "https://twitter.com/intent/tweet?"
+ "text=" + encodeURIComponent(tab.title)
+ "&url=" + encodeURIComponent(tab.url);
//window.open(urlToTweet);
}
chrome.browserAction.onClicked.addListener(onClicked);
window.open is no good, as it opens a new tab. Neither is window.location and variants, that don't even seem to work at all. I realise I may have to add some chrome.extension.getURL to twitterWidgets.src, or something like it, but at this point, the more I mess with the script, the more confused I get.
Any help in the right direction is greatly appreciated.
I'm not really as to what your trying to do but if you use window.open like this it will open in the same page.
window.open("http://www.insertUrlHere.com","_self")
Hope this helps and is simple enough
Related
I've been having this problem with the Google bookmarks "bookmarklet" button in Chrome for several years now: it does not reliably save URLs to https://www.google.com/bookmarks so I have to double-check every link I save. The form is invoked by clicking the Google Bookmark button in the Chrome bookmarks bar that is a javascript link that opens the form. The button comes from the bottom of the Google bookmarks page itself:
Google Bookmarks page
Google Bookmark button properties
Many links will not save unless I add a suffix such as #1 to the end of the URL, and even that is not a 100% effective workaround. For example, the URL http://jsbeautifier.org/ only saves if I append the #1 in the URL field: http://jsbeautifier.org/#1.
Google Bookmarks Form
I don't know if it's an issue with the javascript, encoding the URL, or an issue on Google's end they have never fixed. Here is the full javascript that comes directly from the button properties. I added the whitespace for readability:
javascript: (function() {
var a = window,
b = document,
c = encodeURIComponent,
d = a.open("https://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + c(b.location) + "&title=" + c(b.title), "bkmk_popup", "left=" + ((a.screenX || a.screenLeft) + 10) + ",top=" + ((a.screenY || a.screenTop) + 10) + ",height=510px,width=550px,resizable=1,alwaysRaised=1");
a.setTimeout(function() {
d.focus()
}, 300)})();
Thanks in advance! :)
I have similar issue of not able to add a lot of https website into Google Bookmarks, especially those from Github or Google's Chrome Webstore. Sometimes if you change the https prefix to http, it will work, but not for all.
I guess the problem lies at the backend side, because it also fails when you try to add the URL in question directly at the Add bookmark page.
Seems Google deserted this product (originated from the time of Google Toolbar) and favors Google Chrome bookmark sync solution.
Say I have a simple script
var i = 0;
test();
function test() {
console.log(i++);
setTimeout(test, 1000);
}
I put it in a Google Chrome console. How do I make it continue to run after the page navigates to another (should continue to print out numbers when browsing the web)?
Maybe save the variable 'i' in onbeforeunload() function, and launch a new script with that saved variable?
How do I make it continue to run after the page navigates to another
you can't, the script cannot continue on another page, it's the browser that runs the javascript in the page, and that will stop it when moving to another page.
(or) should continue to print out numbers when browsing the web?
you have yourself answered this. You can certainly save the counter in localstorage and resume counting on the next page, provided this next page contains the same or similar script and the logic to restore the counter from localStorage.
Or, you can move part of this logic to a server-side script.
I suppose this script is an example and displaying numbers is not really what you want to do.
If you are looking for something to run script even when you have left the browser, I suggest you take a look at Service workers.
If you want more resources, you can check Jake Archibald's blog. He is a chrome developer and he is always talking about service workers. An introduction here.
I didn't see any good suggestions posted already for what I was trying to do but I came up with something that worked for me. I wanted to add a navigation element on the page and not have it go away after navigating. This was on a website that was not managed by me. I removed the innerHtml of the body of the page, added an iframe and pointed it at the page I was on, set it to 100% width and height and removed the border. Then I could navigate within the iframe, but still have my script function run in a set timeout to add the navigation element back to the page after it navigated. Something like this:
document.body.innerHTML = ''
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
document.body.appendChild(iframe);
iframe.setAttribute('src', window.location.href);
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.border = "0";
function addContent(){
setTimeout(()=>{
elementToAddTo = iframe.contentWindow.document.getElementById('my-element-id')];
contentToAdd = document.createElement('div');
contentToAdd.innerHTML = `<p>My new content</p>`
elementToAddTo.insertBefore(contentToAdd, elementToAddTo.childNodes[0]);
}, 1000);
}
addContent()
Then in that new content somewhere I had an onchange event which would navigate and call the addContent function by saying window.top.addContent();
onchange="window.location.href = window.location.href.replace(/(param1=.*)/, 'param1='+myNewParamValue); window.top.addContent();">
I Understand this approach makes a lot of assumptions about what you're trying to do and maybe it is only working for me because I'm only changing a param value, but I want to leave this hear in case it helps somebody trying to figure out how to do something similar.
First of all I'm not quite sure this is the place for this kind of question, if not please tell me and I'll remove it.
I'm developing a script that modifies the DOM a bit and I'd like to test it in real sites to see if it behaves correctly and to detect issues.
I was wondering how simulate that the script is at that page and if it would be possible by using chrome dev-tools.
At first I tried adding the script to the but the script doesn't execute.
I tried writing this on the console but didn't work:
var script1 = document.createElement("script");
var script2 = document.createElement("script");
var head = document.querySelector("head");
var text = 'myscript();';
script2[(script2.innerText===undefined?"textContent":"innerText")] = text;
script1.setAttribute("src", "http://mysite.myscript.js");
head.appendChild(script1);
script1.onload = function(){ head.appendChild(script2) };
EDIT: Actually that script worked but in the inside I was listening to a DOMcontentLoad event, so of course when I executed that from the console, the dom was already loaded.
This can be done using the DevTools. To make it easy to do in many places, you should take advantage of a feature called Snippets.
This is the code I used to test in my snippet. I changed the "mysite" URL to pull a copy of Material Design Lite's JS and set the text to log the componentHandler object. Other than these changes, it is your code:
var script1 = document.createElement("script");
var script2 = document.createElement("script");
var head = document.querySelector("head");
var text = 'console.log(componentHandler);';
script2[(script2.innerText===undefined?"textContent":"innerText")] = text;
script1.setAttribute("src", "https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js");
head.appendChild(script1);
script1.onload = function(){ head.appendChild(script2) };
With this you need to do the following steps:
Open the sources panel
Go to the "Snippets" resources tab in the left hand panel (green arrow.)
Right click in the resource views (blue) and select "New Snippet"
Name the snippet, in my case I used "test" for the name. Just make sure you understand what it is.
Fill in content editor with script.
Once content is saved, right click on the script in the resources listing. Then select "Run Snippet"
Check console (Red outline, for drawer or you may go to the console panel itself) to see output.
To verify further that this is working, you can go check the Elements Panel.
I use JQwidgets ,, I use to print data onclick print-button
as code :
$("#print").click(function () {
var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="utf-8" />\n' +
'<title>jQWidgets Grid</title>\n' +
'</head>\n' +
'<body>\n' + gridContent + '\n</body>\n</html>';
document.write(pageContent);
document.close();
newWindow.print();
});
When I close printing-widow(not continue printing), I can't use the grid-scroll (on chrome)..
google-chrome Version 34.0.1847.131 m
This worked fine on Firefox and IE..
How to fix the scroll after closing printing-window on chrome
Fiddle-Demo
It looks like you're not the only one with this issue.
I understand that your code is already setup and you want to run with what you have, but unless someone comes up with a hack or Google decided to fix what is clearly a bug, I think you need to re-think how you are approaching this issue.
If chromeless windows were an option, or if the print dialogue were a modal then you could pull this off with the current strategy, but neither of those options are possible in Chrome. Even if you were able to get around this scrolling issue somehow you're still left with a less than desirable UX problem in that if the user hits "cancel" in the print dialogue then they are left with a still open blank window.
Here is a JS fiddle to demonstrate that you need to change your approach: DEMO
You can see from this demonstration that even if we run a completely separate script from within the new window by passing it as plain text in the content object, it still causes the same issue. This means to me that this is a parent/child type of a relationship that is not easily circumvented with JS.
I recommend 2 alternative possible solutions:
Option1:
<input type="button" value="Print" onclick="window.print(); return false;" />
This triggers a full screen print dialogue that can't be closed from the "Windows Close Button." That way you can avoid the issue all together. Then you can use a combination of JS and Print Styles to target and isolate the information you want to print. I know it's more work but I think may be the better cross-platform solution.
This option is more brute force and simplistic in nature (and you have already commented that you know this but I'm leaving it up because it's still an option).
DEMO
Option2:
User clicks on a link/button that opens a new tab/window
In the same function the data from your table gets loaded into a JSON Object
The JSON object is loaded into a print template in the new tab/window
the template initiates the print function
By taking these actions, I think you will have disassociated the JS instance enough that the new tab will not affect the initiating script.
This is a browser bug - you'd have to find some sort of hack to fix it.
Doesn't sound like you want to put the print dialog code elsewhere thus not affecting your scroll bar. That is the obvious solution but it sounds like you can't do that.
Here's what I would do: Wait until someone has triggered the problematic condition, then put an event listener on the scroll event. when it happens... go ahead and reload the page.
Simple, easy, fun.
var needToReload = false;
$("#print").click(function () {
... as you have
needToReload = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
}
$('#contentjqxgrid').scroll(function () {
if (needToReload) {
window.location.reload();
}
});
$("#jqxscrollbar").jqxScrollBar({
width: 5,
height:180,
theme:'energyblue',
vertical:true
});
$("#jqxscrollbar1").jqxScrollBar({
width: 300,
height:5,
theme:'energyblue'
});
Look at jsfiddle: http://jsfiddle.net/8PtUX/6/
i'm currently working on a function (started after Buttonclick) to print a document in Lotus Notes (IBM Domino Designer 9.0 Social Edition Release 9.0). I have a custom control which creates a new document to the database. After saving the document its opened in read-only-Mode. There you have a button which will redirect you to a new window where the same contents are displayed without any layouts and something else (just the Text). Now its possible to print the page with Ctrl+P. There are two differen xPages for that.
Distribution.xsp
DistributionPrint.xsp
First of all i'm using
path = facesContext.getExternalContext().getRequest().getRequestURL();
to get the current page URL. After that there is an option to replace the current Page of the path (Distribution.xsp) into DistributionPrint.xsp.
var replacePage = #RightBack(path, "/");
path = #ReplaceSubstring(path, replacePage, "DistributionPrint.xsp");
When im testing it the replacement successfully worked. After that i'm bulding a new URL for the specific document to open with the new path. Finally everything is placed into the view.postScript method:
var docid = docApplication.getDocument().getUniversalID();
view.postScript("window.open('"+path.toString() + "?documentId=" + docid + "&action=openDocument"+"')")
Now my Problem starts. At 99% of my trys the new window is opened like i said the programm to do. But there are some kind of documents where i click on the button and he doesn't open a new window and trys to open the old Distribution.xsp url. I already tested out the path he wants to open at these kind of documents by using the debugtoolbar. The result of the button click returns the completly correct URL which should be opened. I can also copy that url and paste it manually into my browser => it works! But if i want to open that URL by a buttonclick and viewPostScript nothing happens.
Has anybody expierenced the same problem like me? Maybe one of you can help me through that problem. Its really annoying that everything works finde at 99% of my documents but at some documents it doesn't work although the given url is 100 percent correct.
Thanks for everyones help!
Try adding you code into a javascript function on the page and call that function from your view.postscript code
Or as Panu suggested add it to onCompete code
If the URL is correct then it sounds like a problem with view.postScript. Try with <xp:this.onComplete>.
Other things to try:
Use var w = window.open(... Plain window.open may change the URL of
current window.
Double check the URL with an alert();
You might be barking up the completely wrong tree. Did you try, instead of creating a second page for printing, create a second CSS stylesheet?
Using #Media Print you can tell the browser to use that stylesheet for printing. There you set all navigational elements to display : none and they won't print.
Removes the need to maintain a separate XPage for the printing stuff.
Thank you everyone for your suggestions. The solution of Fredrik Norling worked for me. I placed the Code into a function and called it at the buttonclick. Now every page is opened as expected. Thank you very much for the help!