React Chrome Extension not rendering
I am beginning to build a Chrome Extension using React. My first goal is just to get the React logo to open in the browser extension just like any React project would after its initial build. I followed a few tutorials and set up my manifest file:
{
"short_name": "React App",
"name": "React Extension",
"manifest_version": 2,
"browser_action": {
"default_popup": "public/index.html",
"default_title": "React Ext"
},
"version": "1.0"
}
I haven't edited any other files so the index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
When I upload my extension file to Chrome and try to run this extension, only a small white box appears. I would expect the usual React logo to have rendered in my extension. I have been playing around with various solutions and I did discover that if I added
tags and some text into my index.html then that text will appear in the browser extension.
I'm guessing I need something to tell my manifest which files the index.html will reference, but so far I haven't had any luck.
If anyone could get me on the right track I would greatly appreciate it.
reactjs
google-chrome-extension asked Nov 14 '18 at 13:50
user8735495user8735495
1499
|
show 2 more comments
I am beginning to build a Chrome Extension using React. My first goal is just to get the React logo to open in the browser extension just like any React project would after its initial build. I followed a few tutorials and set up my manifest file:
{
"short_name": "React App",
"name": "React Extension",
"manifest_version": 2,
"browser_action": {
"default_popup": "public/index.html",
"default_title": "React Ext"
},
"version": "1.0"
}
I haven't edited any other files so the index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
When I upload my extension file to Chrome and try to run this extension, only a small white box appears. I would expect the usual React logo to have rendered in my extension. I have been playing around with various solutions and I did discover that if I added
tags and some text into my index.html then that text will appear in the browser extension.
I'm guessing I need something to tell my manifest which files the index.html will reference, but so far I haven't had any luck.
If anyone could get me on the right track I would greatly appreciate it.
reactjs
google-chrome-extension asked Nov 14 '18 at 13:50
user8735495user8735495
1499
That was the wrong tutorial. An extension page should havescripttags that point to your js. Find a different tutorial for a react chrome extension, not just a react app. To see the basic vanilla extension page examine the official demo extensions.
– wOxxOm
Nov 14 '18 at 14:09
@wOxxOm Thank you I will take a look at these.
– user8735495
Nov 14 '18 at 14:12
@wOxxOm most of these do not involve a popdown extension. I understand that to add functionality to my extension I will need a content script but for now I just want to display the react logo on my extension.
– user8735495
Nov 14 '18 at 14:25
1
That popup is called "browserAction", and it doesn't use content scripts (those are for web pages). Make sure to skim over the architecture overview too.
– wOxxOm
Nov 14 '18 at 14:36
This is helpful. It looks like I need to add script tags into my index.html to link to any of the other pages I need my extension to interact with.
– user8735495
Nov 14 '18 at 14:50
|
show 2 more comments
I am beginning to build a Chrome Extension using React. My first goal is just to get the React logo to open in the browser extension just like any React project would after its initial build. I followed a few tutorials and set up my manifest file:
{
"short_name": "React App",
"name": "React Extension",
"manifest_version": 2,
"browser_action": {
"default_popup": "public/index.html",
"default_title": "React Ext"
},
"version": "1.0"
}
I haven't edited any other files so the index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
When I upload my extension file to Chrome and try to run this extension, only a small white box appears. I would expect the usual React logo to have rendered in my extension. I have been playing around with various solutions and I did discover that if I added
tags and some text into my index.html then that text will appear in the browser extension.
I'm guessing I need something to tell my manifest which files the index.html will reference, but so far I haven't had any luck.
If anyone could get me on the right track I would greatly appreciate it.
reactjs
google-chrome-extension asked Nov 14 '18 at 13:50
user8735495user8735495
1499
I am beginning to build a Chrome Extension using React. My first goal is just to get the React logo to open in the browser extension just like any React project would after its initial build. I followed a few tutorials and set up my manifest file:
{
"short_name": "React App",
"name": "React Extension",
"manifest_version": 2,
"browser_action": {
"default_popup": "public/index.html",
"default_title": "React Ext"
},
"version": "1.0"
}
I haven't edited any other files so the index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
When I upload my extension file to Chrome and try to run this extension, only a small white box appears. I would expect the usual React logo to have rendered in my extension. I have been playing around with various solutions and I did discover that if I added
tags and some text into my index.html then that text will appear in the browser extension.
I'm guessing I need something to tell my manifest which files the index.html will reference, but so far I haven't had any luck.
If anyone could get me on the right track I would greatly appreciate it.
reactjs
google-chrome-extension reactjs
google-chrome-extension asked Nov 14 '18 at 13:50
user8735495user8735495
1499
asked Nov 14 '18 at 13:50
user8735495user8735495
1499
edited Nov 14 '18 at 14:08
user8735495
asked Nov 14 '18 at 13:50
user8735495user8735495
1499
asked Nov 14 '18 at 13:50
user8735495user8735495
1499
asked Nov 14 '18 at 13:50
user8735495user8735495
1499
1499
That was the wrong tutorial. An extension page should havescripttags that point to your js. Find a different tutorial for a react chrome extension, not just a react app. To see the basic vanilla extension page examine the official demo extensions.
– wOxxOm
Nov 14 '18 at 14:09
@wOxxOm Thank you I will take a look at these.
– user8735495
Nov 14 '18 at 14:12
@wOxxOm most of these do not involve a popdown extension. I understand that to add functionality to my extension I will need a content script but for now I just want to display the react logo on my extension.
– user8735495
Nov 14 '18 at 14:25
1
That popup is called "browserAction", and it doesn't use content scripts (those are for web pages). Make sure to skim over the architecture overview too.
– wOxxOm
Nov 14 '18 at 14:36
This is helpful. It looks like I need to add script tags into my index.html to link to any of the other pages I need my extension to interact with.
– user8735495
Nov 14 '18 at 14:50
|
show 2 more comments
That was the wrong tutorial. An extension page should havescripttags that point to your js. Find a different tutorial for a react chrome extension, not just a react app. To see the basic vanilla extension page examine the official demo extensions.
– wOxxOm
Nov 14 '18 at 14:09
@wOxxOm Thank you I will take a look at these.
– user8735495
Nov 14 '18 at 14:12
@wOxxOm most of these do not involve a popdown extension. I understand that to add functionality to my extension I will need a content script but for now I just want to display the react logo on my extension.
– user8735495
Nov 14 '18 at 14:25
1
That popup is called "browserAction", and it doesn't use content scripts (those are for web pages). Make sure to skim over the architecture overview too.
– wOxxOm
Nov 14 '18 at 14:36
This is helpful. It looks like I need to add script tags into my index.html to link to any of the other pages I need my extension to interact with.
– user8735495
Nov 14 '18 at 14:50
That was the wrong tutorial. An extension page should have
script tags that point to your js. Find a different tutorial for a react chrome extension, not just a react app. To see the basic vanilla extension page examine the official demo extensions.– wOxxOm
Nov 14 '18 at 14:09
That was the wrong tutorial. An extension page should have
script tags that point to your js. Find a different tutorial for a react chrome extension, not just a react app. To see the basic vanilla extension page examine the official demo extensions.– wOxxOm
Nov 14 '18 at 14:09
@wOxxOm Thank you I will take a look at these.
– user8735495
Nov 14 '18 at 14:12
@wOxxOm Thank you I will take a look at these.
– user8735495
Nov 14 '18 at 14:12
@wOxxOm most of these do not involve a popdown extension. I understand that to add functionality to my extension I will need a content script but for now I just want to display the react logo on my extension.
– user8735495
Nov 14 '18 at 14:25
@wOxxOm most of these do not involve a popdown extension. I understand that to add functionality to my extension I will need a content script but for now I just want to display the react logo on my extension.
– user8735495
Nov 14 '18 at 14:25
1
1
That popup is called "browserAction", and it doesn't use content scripts (those are for web pages). Make sure to skim over the architecture overview too.
– wOxxOm
Nov 14 '18 at 14:36
That popup is called "browserAction", and it doesn't use content scripts (those are for web pages). Make sure to skim over the architecture overview too.
– wOxxOm
Nov 14 '18 at 14:36
This is helpful. It looks like I need to add script tags into my index.html to link to any of the other pages I need my extension to interact with.
– user8735495
Nov 14 '18 at 14:50
This is helpful. It looks like I need to add script tags into my index.html to link to any of the other pages I need my extension to interact with.
– user8735495
Nov 14 '18 at 14:50
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301805%2freact-chrome-extension-not-rendering%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301805%2freact-chrome-extension-not-rendering%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
That was the wrong tutorial. An extension page should have
scripttags that point to your js. Find a different tutorial for a react chrome extension, not just a react app. To see the basic vanilla extension page examine the official demo extensions.– wOxxOm
Nov 14 '18 at 14:09
@wOxxOm Thank you I will take a look at these.
– user8735495
Nov 14 '18 at 14:12
@wOxxOm most of these do not involve a popdown extension. I understand that to add functionality to my extension I will need a content script but for now I just want to display the react logo on my extension.
– user8735495
Nov 14 '18 at 14:25
1
That popup is called "browserAction", and it doesn't use content scripts (those are for web pages). Make sure to skim over the architecture overview too.
– wOxxOm
Nov 14 '18 at 14:36
This is helpful. It looks like I need to add script tags into my index.html to link to any of the other pages I need my extension to interact with.
– user8735495
Nov 14 '18 at 14:50