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

Why is TypeScript unable to recognize package exports? (using CommonJS as the module system and Node as the module resolution)

I have an NPM package that is built for ESM and CJS formats. The package has a dist folder in the root directory, which contains: dist/esm - modules with ESM dist/cjs - modules with CJS dist/types - typings for all modules In the package.json file, there ...

Having trouble with my React Next app, it's giving me an error stating "window is not defined

Currently, I am developing in Next.js using React components and encountering an issue. I keep receiving a ReferenceError: window is not defined error in react-location-picker. If you need to check out the package, here is the link: react-location-picker ...

Concealing Content within an Accordion

Looking for some guidance on setting up a mobile version of my product image with hover features. Currently using tooltips on desktop and planning to use a modified accordion on mobile, but struggling to make progress. Customized some JS to toggle an acco ...

Is there a method for removing the Microsoft Translator widget while still keeping the translation feature intact?

I am currently utilizing the Microsoft Translation Widget to automatically translate a webpage without requiring any user interaction. Unfortunately, I have been facing an issue where I am unable to remove or hide the widget that keeps popping up on the p ...

A Step-by-Step Guide to Clearing JSON Cache

I'm currently utilizing jQuery to read a JSON file. However, I've encountered an issue where the old values are still being retrieved by the .get() function even after updating the file. As I continuously write and read from this file every secon ...

Converting and downloading CSV to XLSX directly from the front end using TypeScript and React

After successfully converting a JSON response to CSV format for download using the function below, I am now looking to achieve the same functionality but with xlsx files on the front end. The current function works well for CSV files and handles Japanese ...

Bring in items and then go through each one

I'm curious if there's a way to loop through imported objects? import { Row, Col, Form, FormItem, Icon, Input, Tooltip, Image, Button, Dialog } from 'element-ui' objects.forEach(object => { // do something here }) When I have a ...

What is the best way to create a placeholder for a select option with a looping value?

I have successfully implemented loops for the select options, but I needed to add a placeholder. In other words, I wanted the first value of the select options to be a placeholder, followed by the values generated from the loop. Here is the code that I u ...

The JSON outcome lacks a constructor that supports 0 arguments

While trying to create my JSON action, I ran into an issue. The problem lies in the fact that when I try to return a JsonResult, it is being flagged with an error message stating 'JSON result does not contain a constructor that takes 0 arguments&apos ...

The HTML element containing a React variable is failing to render ASCII characters

I am encountering an issue where a custom title, received and set in a JS variable, is displaying the ASCII code instead of the symbol. To illustrate, here is a basic example of the render function: render() { var title = "My Title&#8482;" retur ...

Why Chrome Doesn't Alter the State of li Elements

I'm unsure why, but the CSS code in this particular fiddle fails to function correctly on Chrome. On Firefox, when hovering over one of the li elements, the text becomes visible as expected, whereas this does not occur on Chrome. It seems that changin ...

Unlocking location data in React Router-DOM 6: A step-by-step guide

I am currently working on implementing a 'forgot password' feature, where I am attempting to transfer the email data from the 'login page' to the 'forgot password' page using a Link element. However, I am encountering an issu ...

Setting up a retrieval callback in mongoose and storing it in a global variable

Is there a way to set the value of db as a global variable? I am having trouble with getting the console output of name outside of the findOne function, it keeps showing me undefined. Any suggestions on how to fix this issue? var name; schema.findone({na ...

What is the best way to prevent the deletion of a specific value in ChipInput (material-ui-chip-input)?

Incorporating the chip input feature from material-ui-chip-input into my project has been great for entering emails. However, I am faced with a challenge - I need to disable the ability to delete specific values. Specifically, when populating the input f ...

What is the method for configuring Vue to utilize a value other than the value property in form fields?

I am facing a unique challenge. Consider this: <select name="screw[type]" v-model="form.screw.type"> <option value="My value" ><?php _e('My value', 'fiam'); ?></option> //[...] Now, in another part of my ...

Regex tips: Matching multiple words in regex

I am struggling with creating a simple regex. My challenge is to write a regex that ensures a string contains all 3 specific words, instead of just any one of them: /advancebrain|com_ixxocart|p\=completed/ I need the regex to match only if all thre ...

Exploring jasmine-node: unraveling the mysteries of errors

As I embark on my journey to learn JavaScript, I decided to tackle some exercises on exercism.io. This platform provides pre-written tests that need to be passed. While things were going smoothly initially, I hit a roadblock with the latest exercise where ...

Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another. Provided below is a simplified vers ...

Comparing values inputted from JavaScript using PHP

I am passing values from PHP to a script. <img src=\"images/add.jpg\" onclick='add_program_user(".$value['id_program'].",".$value['min_age'].",".$value['max_age'].")' onmouseover=\"this.style.curso ...

Issue with unnamed column in Pandas dataframe prevents insertion into MySQL from JSON data

Currently, I am working with a large JSON file and attempting to dynamically push its data into a MySQL database. Due to the size of the JSON file, I am parsing it line by line in Python using the yield function, converting each line into small pandas Data ...