PWA manifest.json – “theme_color” and “background_color” not working, splash screen not showing on android device

When I look at the manifest.js in Chrome DevTools I can see that the logo and colors are there. However, when I start the website from my homescreen on my android device, neither the background or theme color is loaded, nor my splash screen is shown.
Any idea why?

Manifest.json:

{
  "short_name": "Example",
  "name": "Example",
  "icons": [
    {
      "src": "images/logo_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/logo_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./",
  "display": "standalone",
  "theme_color": "#a300c4",
  "background_color": "#c46a00"
}

Screenshot:
Manifest in Chrome Devtools

port vanilla js chrome extension to reactjs based

I have a chrome extension developed in vanilla javascript. I want to though move to reactjs. I am using create-react-app. I am totally blank on how to structure my code. I mean where should i place my script for background.js, eventPage.js, background.html etc. I could only show the popup for now. Here is my code in vanilla js

background.html


background.js

var selectedTopic = null;
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    switch(request.message) {
     case 'setTopic':
      window.selectedTopic = request.data;
      break;
     default:
      sendResponse({data: 'Invalid'})
      break;
    }
});


function savetopic(info, tab) {
  const apiUrl = 'http://localhost:3020/v2/check_topic/'+selectedTopic;
  const headers =  new Headers()
  headers.append('Content-Type', 'application/json');
  fetch(apiUrl, {
    method: 'GET',
    headers: headers,
  })
    .then(function(response) {
      return response.json()
    })
    .then(function(data) {
      if(data) {
        const uri = 'url/'+data.topic.id;
        chrome.tabs.create({url: uri});
      }
    })
    .catch(function(err) {
      console.log('error --->', err)
    })
}

var contexts = ["selection"];
for (var i = 0; i < contexts.length; i++)
{
  var context = contexts[i];
  chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({"title": "Send to Navi",
      "id": 'unique',
      "contexts":[context]});
  })
}

chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId === 'unique') {
  savetopic(info, tab)
}
})

content.js

chrome.runtime.sendMessage({
    'email': document.email,
    'password': document.password,
});

function init(event) {
  var topic = "";
  if (window.getSelection) {
    topic = window.getSelection().toString();
  } else if (document.selection) {
      topic = document.selection.createRange().topic;
  } else {
    return topic;
  }
  if(topic.length) {
    chrome.runtime.sendMessage({'message': 'setTopic', 'data': topic}, function(response){
      console.log('response', response);
    });
  }
}

document.addEventListener('click',init);

There is already a manifest file in create-react-app inside public folder. There i have updated my code to include popup. I have no idea regarding content_script, background_script so i have not included them yet.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "start_url": "./index.html",
  "background_color": "#ffffff",
  "version": "1.0",
  "name": "Chrome Extension",
  "manifest_version": 2,
  "browser_action": {
    "default_title": "Navi Extension",
    "default_popup": "index.html"
  },
  "icons": {
    "16": "img/Logo.png",
  },
  "permissions": [
    "contextMenus",
    "tabs",
    "storage",
    "http://*/*",
    "https://*/*"
  ]
}

The project is about user login from the popup so it is as follow

app.js coming from index.html

const App = () => {
    return (
        
); }; export default App;

Login.js - this will show up in the popup

class Login extends React.Component {
    render() {
        return (
            
                
                    
                        
Email Password
); } } export default Login;

How do i use those content.js, background.js and background.html while using create-react-app? Can anyone give me a insight please considering my example, please?

React Native Debugging with Async/Await

I have recently started writing React Native code, and am having tremendous difficulty getting either the Chrome debugger or the React Native debugger to work properly with my Async/Await functions and Async/Await arrow functions.

I can successfully attach the debuggers to my code and step through most of my code, but it seems that when the debugger gets inside of my async methods, it loses track of what line is actually executing, making it impossible to work productively.

Some breakpoints just do not get hit, even though console.log statements indicate that the code has been executed. When this happens, usually the current debug line will switch to the line of the function declaration rather than the actually executing line.

I bootstrapped my app using crna, and am running in Windows 10. Not sure if that is relevant.

I see lots of talk about similar behaviour from 2016 in various forums, but there is no recent news on it, so I would assume it was fixed. If not, then what is the workaround? I need a way to debug my code.