Create an Outlook Web Task from Any Webpage with One Click (Bookmarklet Tutorial)

by | Apr 4, 2025 | Software and Tech | 0 comments

Create an Outlook Web Task from Any Webpage with One Click

Bookmarklet Tutorial

If you use Outlook Web Access and love keeping track of tasks and follow-ups, this bookmarklet is for you. With just a click, you can create a pre-filled calendar appointment in Outlook from the page you’re currently browsing—complete with the title, link, description, content, and even an image if one is available.

This is perfect for capturing articles to read later, meeting ideas, or web-based inspiration you want to return to.

✅ What the Bookmarklet Does

  • Grabs the current page title
  • Pulls the URL
  • Fetches the meta description (if available)
  • Captures the first 5 paragraphs of text
  • Appends the first image > 500×500
  • Opens a new Outlook Web calendar event
  • Sets the subject as TASK: [Page Title]
  • Adds all content to the HTML body
  • Automatically sets a start time:
    • 4 hours from now, unless it’s past 5 PM
    • Then it defaults to 9:00 AM the next day
  • Opens a centered popup, scaled to 80% of your screen/browser width (minimum: 1024px, max: 2048px)

️ Supported Browsers

  • ✅ Google Chrome
  • ✅ Microsoft Edge (Chromium)
  • ✅ Firefox
  • ❌ Safari (limited support for popup sizing and bookmarklets)

How to Install the Bookmarklet

1. Copy the Bookmarklet Code

Below is the minified version. Copy the entire line below:

javascript:(function(){function pad(n){return n.toString().padStart(2,"0")}const now=new Date();let start=new Date();start.setHours(start.getHours()+4);if(start.getHours()>=17){start.setDate(start.getDate()+1);start.setHours(9,0,0,0)}else{start.setMinutes(0,0,0)}const end=new Date(start.getTime()+18e5);function formatDateTime(t){return t.getUTCFullYear()+"-"+pad(t.getUTCMonth()+1)+"-"+pad(t.getUTCDate())+"T"+pad(t.getUTCHours())+":"+pad(t.getUTCMinutes())+":00Z"}const pageTitle=document.title,pageUrl=location.href,metaSummary=document.querySelector('meta[name="description"]')?.content?.trim()||"",paragraphs=Array.from(document.querySelectorAll("p")).slice(0,5).map(p=>p.textContent.trim()).filter(Boolean);let imageHTML="";const images=document.querySelectorAll("img");for(let img of images)if(img.naturalWidth>500&&img.naturalHeight>500){imageHTML='<p>&nbsp;</p><img src="'+img.src+'" alt="Image" style="max-width:100%;">';break}const summaryHTML=metaSummary?"<p>"+metaSummary+"</p><p>&nbsp;</p>":"",paragraphHTML="<hr><p>&nbsp;</p>"+paragraphs.map(p=>"<p>"+p+"</p><p>&nbsp;</p>").join(""),bodyHTML="<h1>"+pageTitle+"</h1><p>&nbsp;</p><p><a href=\""+pageUrl+"\">"+pageUrl+"</a></p><p>&nbsp;</p>"+summaryHTML+paragraphHTML+imageHTML,subject="TASK: "+pageTitle,bodyEncoded=encodeURIComponent(bodyHTML),startStr=formatDateTime(start),endStr=formatDateTime(end),rawW=Math.min(screen.width*0.8,window.outerWidth*0.8),popupWidth=Math.min(2048,Math.max(1024,Math.floor(rawW))),popupHeight=700,left=(window.outerWidth-popupWidth)/2+window.screenX,top=(window.outerHeight-popupHeight)/2+window.screenY;window.open("https://outlook.office.com/calendar/deeplink/compose?subject="+encodeURIComponent(subject)+"&body="+bodyEncoded+"&startdt="+startStr+"&enddt="+endStr,"_blank",`width=${popupWidth},height=${popupHeight},left=${left},top=${top}`)})();

2. Add It to Your Browser’s Bookmarks

In Chrome or Edge:

  1. Right-click your Bookmarks Bar
  2. Choose Add Page
  3. Name it something like "Add Outlook Task"
  4. Paste the code into the URL field
  5. Click Save

In Firefox:

  1. Open the Bookmarks Menu
  2. Choose Bookmark This Page
  3. Click More…
  4. Replace the URL with the code above
  5. Rename it as desired, then Save

Technical Breakdown (Unminified Version)

Below is a clean version of the code with explanations:

(function() {
  function pad(n) {
    return n.toString().padStart(2, '0');
  }

  const now = new Date();
  let start = new Date();
  start.setHours(start.getHours() + 4);

  // If it's past 5 PM, set task to 9 AM tomorrow
  if (start.getHours() >= 17) {
    start.setDate(start.getDate() + 1);
    start.setHours(9, 0, 0, 0);
  } else {
    start.setMinutes(0, 0, 0);
  }

  const end = new Date(start.getTime() + 30 * 60 * 1000); // 30 min later

  function formatDateTime(dt) {
    return `${dt.getUTCFullYear()}-${pad(dt.getUTCMonth()+1)}-${pad(dt.getUTCDate())}T${pad(dt.getUTCHours())}:${pad(dt.getUTCMinutes())}:00Z`;
  }

  // Grab content from the page
  const pageTitle = document.title;
  const pageUrl = location.href;
  const metaSummary = document.querySelector('meta[name="description"]')?.content?.trim() || "";

  // First 5 paragraphs
  const paragraphs = Array.from(document.querySelectorAll('p'))
    .slice(0, 5)
    .map(p => p.textContent.trim())
    .filter(Boolean);

  // First image larger than 500x500
  let imageHTML = "";
  const images = document.querySelectorAll('img');
  for (let img of images) {
    if (img.naturalWidth > 500 && img.naturalHeight > 500) {
      imageHTML = `<p>&nbsp;</p><img src="${img.src}" alt="Image" style="max-width:100%;">`;
      break;
    }
  }

  const summaryHTML = metaSummary ? `<p>${metaSummary}</p><p>&nbsp;</p>` : "";
  const paragraphHTML = "<hr><p>&nbsp;</p>" + paragraphs.map(p => `<p>${p}</p><p>&nbsp;</p>`).join("");

  const bodyHTML = `<h1>${pageTitle}</h1><p>&nbsp;</p><p><a href="${pageUrl}">${pageUrl}</a></p><p>&nbsp;</p>` + summaryHTML + paragraphHTML + imageHTML;
  const subject = `TASK: ${pageTitle}`;
  const bodyEncoded = encodeURIComponent(bodyHTML);
  const startStr = formatDateTime(start);
  const endStr = formatDateTime(end);

  // Calculate popup size
  const rawWidth = Math.min(screen.width * 0.8, window.outerWidth * 0.8);
  const popupWidth = Math.min(2048, Math.max(1024, Math.floor(rawWidth)));
  const popupHeight = 700;
  const left = (window.outerWidth - popupWidth) / 2 + window.screenX;
  const top = (window.outerHeight - popupHeight) / 2 + window.screenY;

  // Build Outlook calendar URL
  const outlookUrl = `https://outlook.office.com/calendar/deeplink/compose?subject=${encodeURIComponent(subject)}&body=${bodyEncoded}&startdt=${startStr}&enddt=${endStr}`;

  window.open(outlookUrl, '_blank', `width=${popupWidth},height=${popupHeight},left=${left},top=${top}`);
})();

Tips and Troubleshooting

  • Make sure you’re logged in to Outlook Web Access before clicking the bookmarklet.
  • If popup blockers prevent the window, allow popups for outlook.office.com.
  • On some sites with restrictive content security, the paragraphs or image may not appear.

Want More?

This setup is a starting point. You can expand it to:

  • Auto-tag tasks with categories
  • Pull selected text instead of paragraphs
  • Add fallback for Google Calendar
  • Export .ics files offline

If you’d like help updating this bookmarklet to do any of the ideas above, or something on your own… reach out! Or just at ChatGPT… it did all of this, including writing most of this post!

Stay up on how I’m using this foundation… Here’s a GitHub repo where I will continue to refine and edit this bookmarklet – feel free to jump on in!

Print Friendly, PDF & Email