I'm integrating a button that will launch the Evernote Bookmarklet in my project. The code for the bookmarklet is:
javascript:(function() {
EN_CLIP_HOST='http://www.evernote.com';
try{
var x=document.createElement('SCRIPT');
x.type='text/javascript';
x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+ (new Date().getTime()/100000);
document.getElementsByTagName('head')[0].appendChild(x);
}catch(e) {
location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);
}
})();
The code is called with an onClick event on a HTML link. My problem is what is the best way to strip off the styling for when the Evernote clips it and saves it? So that it readable?
Stripping the styling is never safe and never will be. If Evernote changes its response, your code will probably break.
You should take a look at their API instead.
Related
I have created a Samsung smart-tv app using javascript and now I want to disable the TTS in this app but don't know how I can do this please help.
I have tried using window.speechSynthesis but it is not working don't know why.
currently what i have done is when window load i call an init() function
function init(){
if ('speechSynthesis' in window) {
var synthesis = window.speechSynthesis;
synthesis.cancel();
} else {
console.log('Text-to-speech not supported.');
}
}
but it does not work and so finally i want to disable the feature of Text to speech from my application
You can't disable that feature. The SpeechSynthesis api is if you want to add extra functionality, not for disabling the native feature (which can only be disabled by users of your app from the TV/browser settings).
As written here: https://developer.samsung.com/smarttv/develop/legacy-platform-library/tv-functionality/accessibility.html
If user turns on Accessibility option for TTS in menu, TTS will read contents of HTML elements automatically.
You can try 2 things (which might not work):
Run every 1s (or more often) speechSynthesis.cancel() in a setInterval (I'm not sure this will stop the native TTS of the TV though).
setInterval(() => window.speechSynthesis.cancel(), 1000)
Replace window.speechSynthesis.speak with an empty function at the beginning of your app (considering Samsung TV uses this for speaking).
window.speechSynthesis.speak = () => {}
Please have a good reason to do so, disabling voice over is never a good choice. You are basically removing access to people with visual impairments and even if you did a bad job at making your app accessible that will always be better than just disabling it.
Having said that, there's no way to disable voice over using javascript but you can disable it by adding the following tag inside <widget> in your config.xml file:
<tizen:metadata key="http://samsung.com/tv/metadata/use.voiceguide" value="false" />
I have this web code:
<a id="btn">Click</a>
<script>
$('document').ready(function() {
$('#btn').click(function() {
...
location.search = $.params({click: '1'});
});
});
</script>
This code work perfectly in Chrome.
But I want to test it with HtmlUnit. I wrote:
page= (HtmlPage) ((HtmlAnchor) page.getDocumentElement().querySelector("#btn")).click();
assertThat(page.getUrl().getQuery(), containsString("click=1"));
This code works randomly. Sometime the test passed and sometimes failed.
I think it is due because of the asynchronous call to JS, but I couldn't solve it.
So how can I test it?
Besides, there is better solution to test web site insted HtmlUnit? HtmlUnit disappointed...
The fact that your code works randomly might mean that there is a timing issue in the asynchronous JS call. I have explained the best alternative to come around these kind of issues in this other question: Get the changed HTML content after it's updated by Javascript? (htmlunit)
Answering your second question, HtmlUnit is a pain in the neck when it comes to JS. Maybe Selenium with the native browser (eg: IE) drivers are a better alternative. Plan C would be PhantomJS but it is not a Java library.
I fell also in similar issue. My html link is triggering javascript using events.
My not working test code was:
HtmlAnchor anchor = element.getFirstByXPath("//a[#id='...']");
anchor.click(); // This is not firing events on js side!!!!
How it works:
HtmlAnchor anchor = element.getFirstByXPath("//a[#id='...']");
anchor.fireEvent("click"); // JS running which listening on click events!
I am trying to edit javascript on a site using Chrome's Developer Tools. I have read about 30 accounts of how to do this as well as watched a few videos. The fact is, when I go to the sources tab and open the file I want to edit, I can't do anything to it. Is there some step I am missing?
I can create break points, step through, etc... I just can't edit. Was this functionality removed recently?
I know this question is stale, but I just had a similar problem and found the solution.
If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.
You can edit javascript in the developer tools on the "Sources" tab, BUT it will only allow you to edit javascript in its own file. Script embedded in an HTML (or PHP) file will remain read-only.
It has some limitations:
has to be a JS file. can't be embeded tags in a html page.
it cannot be prettified.
I don't know if you need this to save permanently, but if you need to just temporarily modify the js:
I can copy that javascript I want to modify into a text editor, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works. Will last until you reload the page.
I did search "chrome dev tool edit javascript". This page is the first search result. But it is too outdated, it does not help me.
I am using Chrome 73, this version of Chrome has "Enable Local Overrides" option. Using the function, I could edit a javascript and could run and debug.
My solution:
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!
Chrome developer tools allows you to edit javascript in the browser if the javascript is in a .js file. However, it does not seem to allow me to edit javascript that is embedded in an HTML page. ie:
<script type="text/javascript>
// code here that I want to debug/edit
</script>
This is a big problem for me as I have quite a bit of embedded javascript in a certain page.
Similar to this question: Edit JavaScript blocks of web page... live but this is about firefox, not chrome.
How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?
Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script> tags. Also you can add debugger; command to script what you want to debug. For example:
<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>
Don't forget to remove debugger;'s when you want to release your website.
I had a difficult time locating the file that had my inline/embedded javascript. For others having the same problem, this may or may not be helpful...
Using Chrome 21.0.1180.89 m for Windows
All files are shown after clicking that very discreetly placed button. See:
Now you may begin debugging...
None of these answers have worked for me.
What works for me is if I have my javascript on the page already loaded, I can copy that javascript, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works.
Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".
If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.
Solution described here: https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript
Add the 'sourceURL' directive in your inline/embedded script like this:
<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>
Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source
I'm trying to paste clipboard data into a textarea using execcommand("paste") with a chome extension, but i cannot seem to get it to work.
permissions are set.
I have tried to set focus() on the textarea, but document.execCommand("paste") does nothing, and I get no error.
calling execcommand("paste") from background page also does nothing.
<form>
<textarea id="ta"></textarea>
</form>
<script type="text/javascript">
document.findElemetById("ta").focus();
document.execCommand("paste");
</script>
Clipboard functionality is a key part of my extension so I've seen all the normal problems. On my background page I expose a copy and a paste function and the page itself contains <textarea id="sandbox"></textarea>;
function copy(str) {
var sandbox = $('#sandbox').val(str).select();
document.execCommand('copy');
sandbox.val('');
}
function paste() {
var result = '',
sandbox = $('#sandbox').val('').select();
if (document.execCommand('paste')) {
result = sandbox.val();
}
sandbox.val('');
return result;
}
I'm using jQuery for simplicity but you get the idea. Now any time I want to use the clipboard functionality I simply call the relevant function. Other pages in my extension can access this API via chrome.extension.getBackgroundPage() but you can also use chrome.runtime.getBackgroundPage(callback) if your background page is an event page.
I'm not sure if this is best practice or if such a thing even exists for this functionality yet but this definitely works for me and is very clean.
This is too long for a comment on Alasdair's excellent response, so I'm creating another answer. Alasdair's answer is excellent and worked great for me, but as a newcomer to Chrome extensions it still took me a while to get it working. For anyone in a similar position, here is an expansion on his answer.
Background/event pages are able to interact with the system clipboard, provided you've requested the appropriate permissions. They are not able to interact with the DOM of pages the user has loaded. Content scripts cannot interact with the system clipboard, but they can interact with the DOM of pages the user has loaded. Take a look at the explanation of the extension architecture for a good overview of all this.
This essentially means you need to do the copy/paste actions from the system clipboard in your event/background pages, which is what Alasdair has outlined above. Any pasting or copying from the DOM of the page the user is viewing has to occur in your content script. The two scripts are able to communicate pretty easily with message passing.
I have an extension whose only purpose is to paste, and the architecture came largely from this post. If you want to see the above technique in practice, take a look at the code. In particular, background.html, background.js, and contentscript.js.
If you're in a real hurry, here is a gist.
function PasteString() {
var editor = document.getElementById("TemplateSubPage");
editor.focus();
// editor.select();
document.execCommand('Paste');
}
function CopyString() {
var input = document.getElementById("TemplateSubPage");
input.focus();
// input..select();
document.execCommand('Copy');
if (document.selection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
}
Hope this will work for you