Replace elements on the live site

Hiding removes a distraction. Replacing puts something calmer in its place: a panel that points the person back to Fruitful, or an interstitial that pauses a surface built to autoplay.

Replace a feed with a panel

"replace": {
  "selector": "[data-testid=\"mainFeed\"]",
  "with": "panel",
  "title": "Read your LinkedIn updates in Fruitful",
  "description": "New posts from the people you follow arrive in your Activity."
}

The matched element is replaced with a Fruitful panel showing the title and description. Use it on the element that is the feed itself, so the rest of the page keeps working.

Replace a surface with an interstitial

"replace": { "selector": "main[role=\"main\"]", "with": "interstitial", "title": "Watching in Fruitful" }

An interstitial covers a whole surface and pauses media inside it. Use it for pages whose only purpose is to keep playing.

One replacement per policy

A policy has one replace and any number of hide rules. Combine them: hide the rails, replace the feed.

{
  "id": "newsfeed-focus",
  "feeds": ["newsfeed"],
  "urls": [{ "pattern": { "hostname": "*.linkedin.com", "pathname": "/feed/*" } }],
  "hide": ["linkedin.com##aside.scaffold-layout__aside"],
  "replace": { "selector": "[data-testid=\"mainFeed\"]", "with": "panel", "title": "Read your LinkedIn updates in Fruitful" }
}

The extension applies hides first, then the replacement. Neither touches records, Views, or the capture pipeline; see Focus is not part of the pipeline.

Reference: replacement.