Discover the Google Chrome Extension that allows you to easily obtain JSON data from your

Here is the structure I have:

And below is my manifest.json:

{
"manifest_version": 2,

"name": "Doktor-MD",
"description": "Share links on Doktor-MD through the browser.",
"version": "1.0",

"permissions": [
"http://www.google.com/"
],

"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html"
}
}

Now, take a look at my index.html:

<!DOCTYPE html>
<html>
<head>  
<META http-equiv=content-type content=text/html;charset=utf8>
<META http-equiv=content-type content=text/html;charset=windows-1254>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>  
<script src="doktormdcore.js"></script>
<title>Doktor TV Md</title>
<script type="text/javascript">
    function GetDataFunction()
    {
        var xhr = new XMLHttpRequest();
        xmlHttpRequest.onreadystatechange = handleStateChange; //  Implemented elsewhere.
        xmlHttpRequest.open("GET",  chrome.extension.getURL('/config_resources/config.json'), true);
        xmlHttpRequest.send();
    }
</script>
</head>
<body>
    <table>
        <tr>
            <td>GetData</td>
            <td><input type="button" id="GetData" value="Get Data"     onclick="GetDataFunction"/></td>
        </tr>
    </table>
</body>
</html>

Here's an example of my config.json data:

{
"glossary": {
    "title": "example glossary",
    "GlossDiv": {
        "title": "S",
        "GlossList": {
            "GlossEntry": {
                "ID": "SGML",
                "SortAs": "SGML",
                "GlossTerm": "Standard Generalized Markup   Language",
                "Acronym": "SGML",
                "Abbrev": "ISO 8879:1986",
                "GlossDef": {
                    "para": "A meta-markup language, used to create markup languages  such as DocBook.",
                    "GlossSeeAlso": ["GML", "XML"]
                },
                "GlossSee": "markup"
            }
        }
    }
}
}

I am trying to retrieve JSON data from my config.json file. How can I test this code to verify that it works correctly? Do you think I am approaching this the right way to get local JSON values?

Answer №1

Before Chrome version 29, the only method available to fetch the contents of a file within the extension package was through XHR, which is the recommended approach.

Starting from Chrome 29, the new chrome.runtime.getPackageDirectoryEntry function allows you to access files inside the package using the HTML5 FileSystem API (You can also refer to http://www.html5rocks.com/en/tutorials/file/filesystem/, http://www.w3.org/TR/file-system-api/, https://developer.mozilla.org/en-US/docs/Web/API/DirectoryEntry).

However, if your code is not functioning as expected, Rob W has identified the possible issue in the comments section.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for implementing a decorator pattern using typescript?

I'm on a quest to dynamically create instances of various classes without the need to explicitly define each one. My ultimate goal is to implement the decorator pattern, but I've hit a roadblock in TypeScript due to compilation limitations. Desp ...

Arrange a JSON array in Python by two important values

I am working with a JSON list that has the following structure: [{ "id": "1", "score": "100" }, { "id": "3", "score": "89" }, { "id": "1", "score": "99" }, { "id": "2", "score": "100" }, { "id": "2", "score": "59" }, { "id": "3", "score": "22" }] My goa ...

Generating dynamic dropdown menus in PHP

I'm currently working on a project that involves creating dynamic drop down lists in PHP using JavaScript. I've managed to fetch the value from the first dropdown list and display the corresponding values in the second list. However, the second l ...

What is the best way to parse a nested json array in PHP?

I am facing an issue with a complex JSON structure that I need to deserialize: [ {"product": {"category_id":1, "created_at":"2015-06-13 17:49:58", "description":"CF77 COIN FINDER", "url_image":"IMG_ ...

Transform a base64 image into a blob format for transmission to the backend via a form

Is there a way to convert a base64 string image to a blob image in order to send it to the backend using a form? I've tried some solutions like this one, but they didn't work for me. function b64toBlob(b64Data, contentType='', sliceSiz ...

Utilizing Apache POI to style the output within an object

Click here for Excel File referenceHello everyone! I've utilized the code below to read data from an Excel sheet. Can someone assist me in formatting the output data into an object that will generate the specified JSON structure when converted using a ...

Select box failing to display default value

I am dealing with a specific data structure: $scope.personalityFields.traveller_type = [ {"id":1,"value":"Rude", "color":"red"}, {"id":2,"value":"Cordial", "color":"yellow"}, {"id":3,"value":"Very Friendly", "color":"green"}, ]; Also, there is a se ...

Looking to streamline your webpack configuration in vue.config.js? Utilize webpack-chain for efficient setup. And, wondering how to leverage the speed-measure-webpack

Below is the setup in my vue-cli3 configuration file: vue.config.js: const path = require('path') const CompressionWebpackPlugin = require('compression-webpack-plugin') const SpeedMeasurePlugin = require("speed-measure-webpack-plugin" ...

Is there a way to verify if the JSON Object array includes the specified value in an array?

I am working with JSON data that contains categories and an array of main categories. categories = [ {catValue:1, catName: 'Arts, crafts, and collectibles'}, {catValue:2, catName: 'Baby'}, {catValue:3, catName: 'Beauty ...

Using Jquery and CSS to display or conceal table elements depending on viewport width

I am seeking advice for my issue. Here is the code snippet on JSFiddle. I have a list of models and corresponding values that vary across different categories. I have created a simple table to display this data. However, I need to alter the table structur ...

It is impossible to resolve Npm vulnerabilities

My journey with learning React began when I decided to create my first app using the command: 'npx create-react-app my-app' However, upon building the app, I encountered a warning in the terminal: 22 vulnerabilities (9 moderate, 13 high) In ...

Struggling to concatenate array dynamically in Vue using ajax request

I am working on a Vue instance that fetches objects from a REST endpoint and showcases them on a web page. Most parts of the functionality work smoothly like filtering, however, there is an issue when attempting to add new objects by requesting a new "page ...

Discover the path with the power of JavaScript

Imagine I am including a JavaScript file in this manner: <script type="text/javascript" src="http://foo.com/script.js?id=120#foo"></script> Would it be possible to access the GET or hash parameters passed through this? Currently, I achieve t ...

Steps for launching Chrome browser with a particular profile using Selenium

Looking to seamlessly access a YouTube page using my Chrome profile without having to go through the hassle of signing in and dealing with MFA, which disrupts automation. Below is the code I am currently using: from selenium import webdriver from selenium ...

Incorporating PHP in JS/jQuery AJAX for creating unique odd and even conditional layouts

My PHP code includes a loop that changes the layout of elements based on whether the $count variable is odd or even. For odd counts, an image appears on the left and text on the right. For even counts, it's the other way around. To load content dynam ...

Steps to eliminate a choice from the MUI Datagrid Column Show/Hide feature

I am attempting to customize which columns are displayed on the <GridToolbarColumnsButton/> component within the MUI Datagrid toolbar (refer to the image below) https://i.stack.imgur.com/joZUg.jpg Potential solution: I have been exploring the AP ...

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

Vue.js: Error 404 - POST request endpoint not found

My goal is to access my Quasar application from other devices connected to the Local Area Network. I have successfully run the app on these devices, but I encountered an error POST http://10.0.0.20:8080/MyComposer/?submitId=3 404 (Not Found) when trying to ...

JavaScript - I have a variable trapped inside a function and I'm struggling to retrieve it

Is it possible that I'm missing something obvious here? I am really struggling to pass the 'body' variable out of this nested function. function retrieveFacebookInfo(userID) { request({ "url": "https://graph.facebook.com/v2.6/" + ...

Contemplate and send an Axios request directly from the browser's URL bar

Seeking JavaScript Logic Assistance I could use some guidance on implementing JavaScript logic, specifically with Vue Router. I don't necessarily need the answer handed to me, just a nudge in the right direction (and apologies if my question is not q ...