PlasmoHQ / plasmo

🧩 The Browser Extension Framework
https://www.plasmo.com
MIT License
10.54k stars 366 forks source link

[RFC] Better than Chrome Apps #276

Open VobileLiuZhiwu opened 2 years ago

VobileLiuZhiwu commented 2 years ago

How do you envision this feature/change to look/work like?

Chrome apps looks mostly like chrome extension, so a chrome app's project could be created by plasmo as it is now.

What is the purpose of this change/feature? Why?

Let people like me to fastly setup a chrome app project with react/antd/ts/HMR, etc, no need to care much about chrome app's permissions.

(OPTIONAL) Example implementations

Just like plasmo's examples

(OPTIONAL) Contact Details

No response

Verify canary release

Code of Conduct

louisgv commented 2 years ago

@VobileLiuZhiwu isn't Chrome App deprecated by chrome?

VobileLiuZhiwu commented 2 years ago

@VobileLiuZhiwu isn't Chrome App deprecated by chrome?

Yes. But there are still 2 years until that point. An alternative at this stage could be a desktop application, but this time it faces release issues. In comparison, chrome app has more advantages, just install it like chrome extension.

VobileLiuZhiwu commented 2 years ago

In fact, we only need a feature that keeping an extension/app window always on top. At present, chrome app can be easily achieved and the distribution cost is low. Our users all use the chrome extension, which is also easy to get started.

VobileLiuZhiwu commented 2 years ago

The problem of chrome extension is that, if we use content-scripts, it will be created and destroyed over and over again with the page refreshing, which will lead to terrible user experience. If we use background page, it can't overlay on the page, hard for user to touch frequently. So, a window always on top is more friendly to user.

VobileLiuZhiwu commented 2 years ago

If we use popup, it will disappear when out of focus. so sad.

louisgv commented 2 years ago

@VobileLiuZhiwu the options.tsx page or the newtab.tsx, or plasmo's tab pages and sandbox pages feature can help with that. For tab page, see:

https://docs.plasmo.com/browser-extension/tab-pages

louisgv commented 2 years ago

If we use popup, it will disappear when out of focus. so sad.

If you need a page that's always showing for the user, try out the new sandbox pages feature, where you can use the bgsw to spawn that page as an independent popup that you control. This will allow your extension page to always be visible on top of current webpage that user is visiting.

Supporting Chrome App is a bit dangerous for a future-heading framework, esp when that platform is officially announced as obsolete by its own creator. However, the Plasmo framework itself can seek to make chrome extension even better than Chrome App - I'd encourage you to think along this line.

How can we make chrome extension as powerful, if not, better than chrome app? What kind of behavior is completely missing, and how can those be re-implemented/polyfilled etc...?

VobileLiuZhiwu commented 2 years ago

How can we make chrome extension as powerful, if not, better than chrome app? What kind of behavior is completely missing, and how can those be re-implemented/polyfilled etc...?

oh, Excellent!! I can't agree more, you are right! Let me take a try, Thank you very much!

VobileLiuZhiwu commented 2 years ago

you can use the bgsw to spawn that page as an independent popup that you control.

@louisgv I'm so sorry, I tried but failed. here's the gitrepo demo It still disappears when lose foucs. How could I do it? Is there any more guides?

And some more questions: we could not access DOM in sandbox, in this workaround, How could we use antd/react-dom in sandbox window?

And, It seems that page in below screenshot is still a tab page, not a sandbox page. In v3, there is no sandbox.html.

I found this similar question, but no answer.

Maybe it would work in v2? But v2 will be obsolete in 2024 right? Frustrated(-_-

image
louisgv commented 1 year ago

And, It seems that page in below screenshot is still a tab page, not a sandbox page. In v3, there is no sandbox.html.

Yeah the sandbox page should be created inside sandboxes instead: https://github.com/PlasmoHQ/plasmo-test/tree/main/rfc/rfc-263-sandbox-pages

VobileLiuZhiwu commented 1 year ago

Yeah the sandbox page should be created inside sandboxes instead: https://github.com/PlasmoHQ/plasmo-test/tree/main/rfc/rfc-263-sandbox-pages

Great! @louisgv

But after I tried the sandboxes popup, it still would disappear after losing focus.

What's the problem, was I wrong in somewhere?

Here is the demo's latest code. click here

Background code pasted here

chrome.runtime.onInstalled.addListener(() => {
  chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    chrome.windows.create({
      type: 'popup',
      focused: true,
      url: './sandboxes/test.html',
      width: 600,
      height: 500,
    })
    sendResponse('');
  })
});

export {}