mdn / mdn/webextensions-examples

MV3 example for getting data from page/content script/activeTab context into action / popup

Open
#533 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

idle needs triage
Dominant language
JavaScript
Stars
4.5k
Forks
2.6k
Avg merge
15h 27m
Merged PRs (30d)
3

Description

What information was incorrect, unhelpful, or incomplete?

It doesn't seem like there is a concrete example of an extension that gets text/data from the page (activeTab) using a background or content script, and displays that data (or the output of a transformation on the data) in the extension's browser or page action popup.

Presumably this can be done using runtime.sendMessage to pass data from the content script to the action, but there isn't a concrete functioning example, and StackOverflow answers for how to do this are sparse and incomplete.

What did you expect to see?

An up-to-date, MV3 example that parses data on the activeTab page/DOM using a background or content script (e.g. scripting.executeScript()), and displays that data in the extension action popup, using message passing to get the data from the background/content script to the extension action page.

Do you have any supporting links, references, or citations?

https://stackoverflow.com/questions/19758028/chrome-extension-get-dom-content is an example of this, but it doesn't have a working MV3 example in the answers that passes the output/data to the extension browser/page action popup.

Do you have anything more you want to share?

Use cases: I have at least two addons that I'm trying to figure out how to do this.

One is a background context menu addon that does manipulation on selected text: I want to display the output in the browser action popup.

The other is an extension that would find certain elements in the page and offer text transformations on them in the browser action popup.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing MV3 examples and the issue's named entry points: activeTab, scripting.executeScript(), runtime.sendMessage, content or background scripts, and the action popup. Done means a functioning MV3 example reads or transforms page data and displays the result in the extension popup; the issue does not identify a target file or test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.