LinkedIn Post Enhancer: Copy Link & Save to Raindrop.io

This UserScript enhances your LinkedIn browsing experience by adding convenient "Copy Link" and "Save to Raindrop.io" buttons directly to each post on your feed and on individual post pages. Say goodbye to extra clicks and manual URL copying!

Features

• Copy Post Link: Instantly copy the canonical URL of any LinkedIn post to your clipboard with a single click. Visual feedback (Copied!) is provided upon success.

• Save to Raindrop.io: Quickly save LinkedIn posts to your Raindrop.io collection. The button automatically pre-fills the Raindrop.io bookmarking page with:

  • The post's direct URL.
  • A descriptive title including the author's name and a snippet of the post's content.
  • The post's content as a detailed description/note.
  • Relevant tags, including linkedin.com and a sanitized author- prefixed tag for the author's name (e.g., author-sumanth-p).

• Seamless Integration: The new buttons are styled to match LinkedIn's existing social action bar for a native look and feel.

• Dynamic Content Support: The script intelligently detects new posts as they load on your feed (e.g., as you scroll), ensuring that buttons are added to all new content without duplicates.

• Single Post Page Support: Functions correctly on both the main LinkedIn feed and when viewing individual posts directly (e.g., https://www.linkedin.com/feed/update/urn:li:activity:123...).

Usage

To use this UserScript, you'll need a browser extension that supports UserScripts, such as Tampermonkey (recommended for Chrome, Edge, Safari, Opera) or Greasemonkey (for Firefox).

1. Install a UserScript Manager:

- **Tampermonkey:** [Chrome Web Store](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo "null") | [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/ "null")

- **Greasemonkey:** [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/ "null")

1. Create a New UserScript:

- After installing the extension, click on its icon in your browser's toolbar.

- Select "Create a new script..." or "New user script...".

- A new tab or window will open with a code editor.

1. Paste the Script:

- Delete any boilerplate code that might be present in the new script editor.

- Copy the entire code from the `linkedin-userscript` immersive above (starting from `// ==UserScript==` and ending with `})();`).

- Paste the copied code into the editor.

1. Save the Script:

- Save the script. In Tampermonkey, you can usually do this by clicking `File > Save` or pressing `Ctrl + S` (Windows/Linux) / `Cmd + S` (macOS).

1. Enjoy on LinkedIn:

- Navigate to your LinkedIn feed (`https://www.linkedin.com/feed/`) or open any LinkedIn post URL directly.

- You should now see the "Copy Link" and "Save to Raindrop" buttons added to the right of the existing Like, Comment, Share, and Send buttons on each post.

How It Works

This UserScript leverages JavaScript and the MutationObserver API to dynamically interact with the LinkedIn webpage:

1. Initialization: The script runs immediately when a LinkedIn feed or post page loads.

2. Button Creation: It defines functions to create the "Copy Link" and "Save to Raindrop.io" buttons, meticulously replicating LinkedIn's existing button styles and functionalities.

3. URL and Details Extraction: For each post, it identifies unique identifiers (data-id or data-urn) to construct the canonical LinkedIn post URL. It also extracts the author's name and the main content of the post to generate a rich title, description, and relevant tags for Raindrop.io.

4. DOM Observation: A MutationObserver is set up to continuously monitor the LinkedIn page for changes in its Document Object Model (DOM). This is crucial because LinkedIn is a Single-Page Application (SPA) that loads content dynamically as you scroll or navigate.

5. Dynamic Insertion: Whenever the MutationObserver detects new elements being added to the page that match the structure of a LinkedIn post, it automatically calls addCustomButtons on those new post elements.

6. Duplicate Prevention: A data-custom-buttons-added attribute is set on each post element after the buttons are added. This ensures that the script doesn't add duplicate buttons if the same post element is re-evaluated by the MutationObserver.

7. Clipboard Interaction: The "Copy Link" button uses the navigator.clipboard.writeText() API for modern and secure clipboard access, with a fallback for older browser environments using document.execCommand('copy').

8. Raindrop.io Integration: The "Save to Raindrop.io" button constructs a special URL (https://app.raindrop.io/add?...) that, when opened in a new tab, triggers Raindrop.io's bookmarking interface with pre-filled data.