Error: Chrome Extension encountered an unexpected token and is unable to process it

I've been working on developing an extension that is meant to locate and swap out a single image, but I'm encountering a SyntaxError in the background script no matter how much I try to fix it.

Here is a screenshot showing the error message

While following this tutorial mostly, my goal differs slightly as I only need to replace one image instead of multiple. I have shared the code I currently have below:

manifest.json

{
"manifest_version" : 2,
"name" : "Test",
"version" : "0.1",
"description" : "test",
"web_accessible_resources" : [
"*.png"
],
"icons" : {
"128": "test.png"
},
"background" : {
"scripts" : ["bgp.js"]
},
"browser_action" : {
"default_icon" : "test.png"
},
"content_scripts" : [
{
"matches" : [
"https://test.com/, https://test.com/*"
],
"js" : ["content.js"]
}
]
} 

bgp.js

console.log(“Background running”);
chrome.browserAction.onClicked.addListener(buttonClicked);
function buttonClicked(tab)
{
let msg = {
txt : “Hello”
}
chrome.tabs.sendMessage(tab.id,msg);
}
}

content.js (adding for completeness)

console.log('replacing image');
chrome.runtime.onMessage.addListener(replace);

function replace()
{

let imgs = document.querySelector(".example");

let url = chrome.extension.getURL("test.png");


   img.src = url;
console.log(url);

}

Answer №1

The quotation marks in your background script seem to be incorrect. Instead of using , you should opt for either " or '.

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

Troubleshooting Key Press Issues with Bootstrap 5 Dropdown and Collapse Feature

Exploration In my quest to create a dynamic Bootstrap (5) Navigation bar/menu with animated sub-menus, I stumbled upon a solution that seems to fit the bill perfectly. By employing data-bs-toggle="collapse" instead of 'dropdown', I dis ...

Increase the count of list items after deleting one by clicking on a button

After removing one item from my list, the total count is not being updated. How can I update the total number of items in the list after removing one? var totalList = document.getElementById('total'); var deleteBtn = document.getElementsByClas ...

Utilizing Laravel 5.3 in combination with Parsley for remote validation functionality

When attempting to validate the email and username remotely for a registration form using parsley, I kept receiving the message: public/checkUserName?username=tester 405 (Method Not Allowed) Here is the code I am using: Input: <input data-parsley-re ...

Is there a way to see the countdown timers in Angular 7?

Is there a way for me to view my timer's countdown as it starts? I have attempted to bind it to a variable, but all I see is [object Object]: setTime(time) { if (this.settime >= 5 ) { this.currentTime = time; this.alerttime = thi ...

Having trouble with adding text to circles in D3 on a line?

I have successfully created some line charts on d3 and then added circles to every 3rd element of the line. Now I am attempting to add text to those circles as well. // defining a circle variable var circles=g2 .append("g") .attr("i ...

Encountering the 415 Unsupported Media Type error while using Spring 3.2

My current task involves inserting and/or updating data in the database utilizing the PUT method with JSON through jQuery 1.6 (Jackson 2.1.1, and Spring 3.2.0). Below is the JavaScript code snippet: var itemsArray=[]; var id; function insertOrUpdate() ...

Storing a variety of specification tables with varying amounts of data in a MySQL database

Managing a product database with variable specification tables can present some challenges. Each product may require different specifications, and the number of columns in these tables could vary as well. One approach to consider is using JSON as a data t ...

What is the process for transforming a promise outcome into JSON format?

My current challenge involves using axios to retrieve JSON data from an external API in my backend and then passing it to the frontend. The issue arises when I attempt to log the result in the frontend, as all I see is a promise object instead of the actua ...

Tips on filtering out unnecessary keys for room entity

Struggling to design a room entity class for handling JSON data with unnecessary objects? Unsure how to exclude those unwanted objects from the entity class? Take a look at the provided JSON structure: { "batchcomplete":true, "contin ...

AngularJS's $resource module returns an empty array as a response

I am trying to display a table with items from JSON data. I have created a Service that returns the JSON data. In my controller, I am querying the Service to receive an array of data. It's a little confusing because I am putting the response in a new ...

Differentiating between swipe and click actions within Angular applications

Utilizing ng-click to display item details in a list while also implementing a jQuery mobile swipe event on the list item to reveal a delete button when swiped left has presented an issue. The problem arises when swiping triggers both the swipe event and a ...

JavaScript adding arrays to JSON files

At this point, I feel like I have no other option. Everything appears to be correct from my perspective. However, nothing seems to be working. I decided to create a small food app for myself to keep track of what I'm eating. I set up a JSON file name ...

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...

Calculate the sum of input values in a JavaScript function with the same class

Can anyone help me figure out how to sum the values of input fields with the same class? I've attempted the code below but it doesn't seem to be working. Any ideas on what I'm doing wrong? <table id="tableID"> <tr> <td> ...

What steps can I take to verify that all textboxes are filled and checkboxes are selected before allowing the user to submit the form?

Here is the JavaScript code and a snippet of the HTML that I am using to create a form. I am having trouble figuring out why the form can still be submitted even when there are empty fields. Ideally, a dialog box should pop up indicating which fields nee ...

Connecting the value of one input to influence another input

There are two input boxes provided - one for current address and another for permanent address. When the checkbox is clicked, the value of the current address should be displayed in the permanent address box. However, I am facing an issue where when I unc ...

The JSON being rendered by the builder does not appear correctly

I currently have the following setup: render(builder: "json") { template(message:'hello', dateCreated:'someDate') { resources { resource(id: "123") resource(id: "456") } } } However, when checking ...

Querying JSON with Node.js and PostgreSQL

Utilizing node-pg, my goal is to search for a specific string within a JSON object. For example, here is a snippet from a row: { viq_id: '801583', title: 'Blank, security key, lock system, and production method', applicants: [ ...

Surprising "unexpected end of line" JavaScript lint notification out of nowhere

In this simplified version of my JavaScript code: function addContent() { var content = []; content.append( makeVal({ value : 1 }) ); // lint message generated } After running a lint program, I received the followi ...

Clone all documents from a NodeJS mongoose collection and transfer them to a different server's database

I need assistance with migrating my database to a new server. My collection consists of approximately 410,000 documents, and I am looking to transfer them in batches of 100 to my new server that runs on mongodb. Below is the code I have written for this ...