e

How to Add a Facebook Toolbar Button to Your Browser

Written by

adm

in

Developer Guide: Creating a Facebook Toolbar Button Extension

This guide walks you through building a simple, cross-browser toolbar button extension that adds a Facebook share/interaction button to the browser UI. It covers project setup, manifest files, background and popup scripts, permissions, OAuth flow considerations, and packaging. Example code targets modern Chromium-based browsers and Firefox using the WebExtensions API (largely compatible across browsers).

Prerequisites

  • Basic knowledge of JavaScript, HTML, and CSS
  • Node.js installed (optional — for tooling)
  • A Facebook app (App ID) if you need deeper platform integration or OAuth

Project structure (recommended)

  • manifest.json
  • background.js
  • popup.html
  • popup.js
  • icon-16.png, icon-48.png, icon-128.png
  • styles.css

1. Create the manifest

Use Manifest V3 for Chromium and the compatible manifest for Firefox. Minimal example (manifest.json):

json
{
“manifest_version”: 3,
  “name”: “Facebook Toolbar Button”,
  “version”: “1.0”,
  “description”: “Quickly share pages to Facebook from your toolbar.”,
  “icons”: {
    “16”: “icon-16.png”,
    “48”: “icon-48.png”,
    “128”: “icon-128.png”
  },
  “action”: {
    “default_popup”: “popup.html”,
    “default_icon”: {
      “16”: “icon-16.png”,
      “48”: “icon-48.png”
    }
  },
  “background”: {
    “service_worker”: “background.js”
  },
  “permissions”: [
    “activeTab”,
    “storage”
  ],
  “host_permissions”: [
    “”
  ]
}

Notes:

  • Use “action” for toolbar button UI. Firefox supports this via the same API.
  • Keep permissions minimal: request more only if needed (e.g., tabs, identity).

2. Toolbar popup UI

popup.html — simple UI to share current page or open Facebook interactions.

html
<!doctype html>
<html>
<head>
  <meta charset=“utf-8” />
  <link rel=“stylesheet” href=“styles.css” />
  <title>Share to Facebook</title>
</head>
<body>
  <div id=“app”>
    <h3>Share this page</h3>
    <button id=“shareBtn”>Share on Facebook</button>
    <hr />
    <label>
      <input type=“checkbox” id=“autoOpen” /> Open Facebook after sharing     </label>
  </div>
  <script src=“popup.js”></script>
</body>
</html>

styles.css — minimal styling.

3. Share flow (popup.js)

Use the Facebook Share Dialog URL to avoid needing full OAuth for basic shares.

javascript
document.getElementById(‘shareBtn’).addEventListener(‘click’, async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const urlToShare = tab?.url || “;

  const shareUrl = ‘https://www.facebook.com/sharer/sharer.php?u=’ + encodeURIComponent(urlToShare);

  const autoOpen = document.getElementById(‘autoOpen’).checked;
  if (autoOpen) {
    chrome.tabs.create({ url: shareUrl });
  } else {
    // open small popup window
    chrome.windows.create({
      url: shareUrl,
      type: ‘popup’,
      width: 600,
      height: 600
    });
  }
});

Notes:

  • The Share Dialog is a straightforward way to share without app review or OAuth.
  • For deep integration (likes, comments, graph API), you must use Facebook OAuth and App ID.

4. Optional: Background script for context menu or badge

background.js — add context menu or update badge count.

javascript
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: ‘share-to-fb’,
    title: ‘Share to Facebook’,
    contexts: [‘page’, ‘link’, ‘selection’]
  });
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  let url = info.linkUrl || info.pageUrl || tab.url;
  const shareUrl = ‘https://www.facebook.com/sharer/sharer.php?u=’ + encodeURIComponent(url);
  chrome.windows.create({ url: shareUrl, type: ‘popup’, width: 600, height: 600 });
});

5. Using OAuth / Facebook App (when needed)

If your extension needs to call Graph API (post programmatically, retrieve user data), follow these steps:

  • Create a Facebook App in the Facebook Developer dashboard; note the App ID.
  • Add an OAuth redirect URI: for extensions use an extension URL (e.g., chrome-extension:///auth.html) or an external redirect.
  • Use chrome.identity.launchWebAuthFlow (Chromium) to perform OAuth:
javascript
const authUrl = </span><span class="token template-string" style="color: rgb(163, 21, 21);">https://www.facebook.com/v15.0/dialog/oauth?client_id=</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation" style="color: rgb(54, 172, 170);">APP_ID</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string" style="color: rgb(163, 21, 21);">&redirect_uri=</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">encodeURIComponent</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">(</span><span class="token template-string interpolation">redirectUri</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">)</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string" style="color: rgb(163, 21, 21);">&response_type=token&scope=public_profile,publish_to_groups</span><span class="token template-string template-punctuation" style="color: rgb(163, 21, 21);">;
chrome.identity.launchWebAuthFlow({ url: authUrl, interactive: true }, (redirectResponse) => {
  // parse access_token from redirectResponse
});
  • Store tokens securely in chrome.storage and refresh as required. Be aware of platform-specific review and permissions on Facebook.

6. Permissions and privacy considerations

  • Request the least privileges needed. Use the share dialog to avoid requesting login or wide permissions.
  • If you store tokens, encrypt or minimize retention; explain in your extension privacy policy.

7. Testing and cross-browser notes

  • Load unpacked extension in Chrome: chrome://extensions → Load unpacked. For Firefox, use about:debugging → This Firefox → Load Temporary Add-on.
  • Manifest differences: Firefox currently supports Manifest V3 partially; test background scripts and service workers behavior.
  • Icon sizes and action behavior may vary — test toolbar placement and popup dimensions.

8. Packaging and publishing

  • Chrome Web Store: follow store listing requirements, privacy policy, and payment/developer account setup.
  • Firefox Add-ons: submit to addons.mozilla.org; adhere to AMO policies.
  • Provide a clear privacy policy and required screenshots.

9. Example enhancements

  • Add share count using Graph API (requires app review).
  • Localize the popup UI.
  • Add keyboard shortcuts and customizable icon behavior.
  • Add analytics (be careful with user privacy; disclose in policy).

10. Quick checklist before release

  • Minimized permissions
  • Tested on Chrome and Firefox
  • Privacy policy and support URL
  • Proper icons and screenshots
  • Clear user-facing settings in popup or options page

This guide gives a compact, practical path to build a Facebook toolbar button extension that supports quick sharing and can be extended for deeper Facebook integration.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts