How to send longer emails from a Chrome extension? - javascript

I would like to make a Chrome extension that lets users send emails with certain text automatically filled in. I was using a mailto: link, but it cannot handle strings longer than 1024 characters, and it cannot create html links. Is there a way I can fill in additional text and maybe even HTML links, from within the email page (perhaps with local storage)?

Unfortunately there is no native chrome/javascript API to my knowledge. I did some searching and found an open source option that someone was working on but it was very skeleton. He was hoping others would jump on with him and flesh it out.
Sounds like you're trying this:
For creating the URL, you can use the &body= tag and url encode the message however there is a limit to the length. It sounds like you already figured out how to open a new tag using chrome so you've been able to create shorter emails using nothing but a modified URL string. I did something similar to that on my first chrome exension. It looked something like this.
function sendToUrl(){ chrome.tabs.query({active:true, windowId: chrome.windows.WINDOW_ID_CURRENT}, function(tab) {
//while this seems to generate the URL correctly, gmail limits how long the body text can be therefore this is not a viable solution
//Also there is no javascript API therefore there is no hope of sending an email.
//Need to loop through each tab and not just the first one
var currentTab = tab[0];
var tabInformation = RPATH.getTab(currentTab.id);
var mailUrl = "https://mail.google.com/mail/?view=cm&fs=1&tf=1&su=My%20Subject&to=";
// grab the email addresss from popup.html
mailUrl += document.getElementById("to").value + "&body=";
// get formBody from popup.html
var formBody = document.getElementById("body").value;
...
//I did some other stuff that isn't relevant here
...
//Concat final mailto url
mailUrl = mailUrl + formBody;
chrome.extension.sendMessage({mailUrl: mailUrl}, function(response){ console.log(response.farewell);});
});}
For longer email bodies
That only gets you half way though. The only alternative I could think of was to split up the tab open and filling out the email body. You could modify the email body after page load completes using append. That might look something like what I have below. Notice I'm selecting the iframe element, then finding the body tag inside of there, and finally appending some html just after the tag opens. Notice the email body is nothing more then html so div, tr, br, etc tags should all work in creating a well formatted email. In my previous example I pulled the text from the form as a string. You could instead use jquery to clone the html on your popup.html page and append the cloned html. For simplicity's sake, I only put text inside the append.
$("iframe#:1t4").find("body.editable").append('<p>My long email body</p>');
I suppose from there you could run a click event but you could also leave that to the user.

Related

Strip HTML elements within DIV

I have a simple search engine on one of our older websites. This site is running IIS 6.0 on Windows Server 2003. The search functionality is provided by Microsoft Indexing Service.
You can see the search functionality on our website. (Just type in "speakers" and you will see some hits.
I would like to use the "FullHit" feature offered by the indexing service. When using this feature the Indexing service inserts the full hit results in between "begindetail" and "enddetail" on a target web page.
The problem that I have is that the documents that are being returned have HTML. This looks messy. (Just click on "Hit Locator Tool" in the search results above to see what I mean.)
I would like to create a DIV section such as ...
<DIV name="target">
begindetail
enddetail
</DIV>
Then, after the page is populated I would like to use javascript to strip out all of the HTML elements (but not the data) between the opening and closing DIV.
For example, <FONT color="magenta">Good Data</FONT> would be modified to only show Good Data.
I can also use Classic ASP if necessary.
Please let me know if you have any suggestions or know of any functions that I can add to the target page to accomplish this task.
Thanks in advance.
I inspected your webpage, and there definitely must be some logic errors in your ASP code. (1) Instead of something like <div></div> being passed to the browser, it is HTML entities for special characters, so it is being passed like &ltDIV&gt &lt/DIV&gt, which is very ugly and is why it is rendering as text instead of HTML code. In your ASP code, you must not be parsing the search result text before passing it to the browser. (2) All of this improperly-formatted code is inserted after the first closing html tag, and then there are closing body and html tags after the improperly-formatted code, so somewhere in your ASP code, you are telling it to append the code to the end of the document, rather than insert it inside the original <body></body>.
If you want to decode the mixture of HTML entities, <br> tags, and text into rendered HTML, this JavaScript may work:
window.onload = function() {
var text = decodeHTMLEntities(document.body.innerText);
document.write(text);
}
function decodeHTMLEntities(text) {
var entities = [
['amp', '&'],
['apos', '\''],
['#x27', '\''],
['#x2F', '/'],
['#39', '\''],
['#47', '/'],
['lt', '<'],
['gt', '>'],
['nbsp', ' '],
['quot', '"']
];
for (var i = 0, max = entities.length; i < max; ++i)
text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);
return text;
}
jsFiddle: https://jsfiddle.net/6ohc1tkr/
But first things first, you need to fix your ASP code, or whatever you use to parse and then display the search results. That's what is causing the improper formatting and display of the HTML. Show us your back-end code and then we can help you.
This is what I used to accomplish what you are trying to do.
string-strip-html
It worked pretty well for me.
I now have the search feature working as expected. I would like to thank everyone for their insightful comments. This feedback helped me identify and fix the problem.
OS: Windows Server 2003
IIS: 6.0
Microsoft Index Server
The hit locator tool will only work properly for HTML pages. If you use this tool with a simple TXT file then the results will not be displayed correctly.

How can some HTML code be isolated from the rest of the webpage?

I'd like to allow the user to customize their user name using HTML tags, without restrictions.
The only problem I've found is they not closing tags...
Ex: (a user name with not closed tag: my<b>nick)
mynick: comment textinnocent user: comment text
I searched for a tag like <sandbox> my <b>nick </sandbox> or any way to force closing every open tag, but I have not been lucky.
Desired result:
mynick: comment textinnocent user: comment text
Is there any smart way to achieve this? (Only using HTML or JS/JQuery)
If you have any incomplete tags, the browser automatically tries to close it(doesn't seem to happen if you have an HTML code following).
If you look at this fiddle https://jsfiddle.net/hwpLyow0/1/
I have the HTML inside the DIV asHello <b><i>World!
But when I alert the HTML from the DIV I get
Hello <b><i>World!</i></b>
I would suggest using jQuery's .html() function or JavaScript's .innerHTML to get the HTML with tags closed.
EDIT:
If users are typing it in textbox, creating a new element(not appending it to document) will do the work for you.
var fix = document.createElement("div");
fix.innerHTML=document.getElementById("test").value;
Fiddle: https://jsfiddle.net/hwpLyow0/3/

Save string as local file.txt

I want to save a string to a local file.txt
I have this HTML:
<div class="content"></div>
and this js
var string = 'ThisIsMyString';
var a = 'text file';
$('.content').append(a);
As you can see the text 'ThisIsMyString' from var a gets saved in the file just as i wanted but the problem is that if you inspect the element you will be able to see my text inside the anchor tag.
You can check it here.
http://jsfiddle.net/VBJ9h/2389/
The question is, is there any way hide the content of the file from the a tag?
It is not possible to hide content from the Developer Console like that.
If you want to request something without revealing an explicit link you should consider using an ajax request, and some programming language to provide a back-end for sending the file to the request.

Detecting & displaying links in a form's text area

When I enter a link (video, image, URL, etc.) in Facebook's "What's on your mind?" form, it auto-detects the link and converts it to a thumbnail with a brief description below the text-area. Can anyone provide me with insight or a link to get me going on how to achieve this?
There's a javascript attached to the textarea change event. The javascript detects if the content of the textarea is a url, if it is, the javascript call a webservice that visit the url looking for the page title, the page description, etc, (or the open graph protocol meta tags), if it find each one of the tags they are returned to the javascript who proper organize then.
Facebook also cache this content, and if the same url is posted by another user, he uses the cache values instead of revisiting the page.
The open graph protocol meta tags:
http://developers.facebook.com/docs/opengraphprotocol/
using something like
var input = document.getElementById("textarea");
input.addEventListener("change", checkLink(e));
input.addEventListener("blur", checkLink(e));
function checkText(text){
var exp = "((ht|f)tp(s?))(:((\/\/)(?!\/)))(((w){3}\.)?)([a-zA-Z0-9\-_]+(\.(com|edu|gov|int|mil|net|org|biz|info|name|pro|museum|co\.uk)))(\/(?!\/))(([a-zA-Z0-9\-_\/]*)?)([a-zA-Z0-9])+\.((jpg|jpeg|gif|png)(?!(\w|\W)))";
return text.match(exp);
}
function checkLink(e){
//here you would want to use a regular expression and check for http:
var regularExpression = !!checkText(e.target.innerHTML); // returns true or false
if(regularExpression){
e.target.innerHTML += "<a href='#'><img src="" alt="" /></a>";
}
}
good resource for regular expressions - http://regexlib.com/Search.aspx?k=image&c=-1&m=-1&ps=20
Warning -- have to leave for work so regular expressions are not checked.
Take the link value and run it through a regular expression that looks for ^http:...[^\s] or ^https:...[^\s] and returns those.
Then, pass those URLs to your server and have your server retrieve the document and return a snippit for you to then put in your document. You must have your own server to help because Javascript, by itself, has security restrictions. Google same origin policy for more info.

jQuery serialize problem

On my website I have a CKEDITOR to publish content. I have build an automatic save function when you switch pages that looks like this:
var oEditor = CKEDITOR.instances.text;
var content = oEditor.getData();
$('#form #text').html(content);
$.post("news/save/" + id + "/" + page, $("#form").serialize());
This gets the current content of the editor, places it in the textarea (it did not always do that automatically apparently). Then serializes the entire form and posts it to my website's save page.
This is works except for when I put youtube code inside the editor. Printing out the following works without any problems (after the content was set):
alert($('#form #text').html());
This would just prints the actual content with the youtube code. But when the .serialize() functions is called the content gets empty.
alert($('#form #text').serialize());
This would just print: "text=%0A".
Can anybody help me fix this problem or suggest another way to post the form's content to the save page?
Thank you.
Is #text is a textarea? if it is then you should probably using val() method to set the value instead of html(), because val() should be used to set/get form element's value.
You should call editor's synchronize procedure, that synchronizes editor contents with the value of the textarea.
After that, the value will be available for serialization as well.

Categories

Resources