Create an Object for Google Chrome

How to modify object data attribute for Google Chrome?

Thanks for the help everyone! I changed the object tag to an Iframe, witch made the following:

<iframe id="previewImage" class="w-100" height="500px"></iframe>

The AJAX-call stayed almost the same:

function getFile(id, r = false)
    {
        timer = setTimeout(function(){
            $.ajax({
                url: "/project/getFile",
                method: "POST",
                data: {id: id}
            })
                .done(function(data)
                {
                    $('#previewImage').prop('src', data);
                    $('#previewImage image').css("width: 100%")
                })
        }, 100)
    }

This worked for me!

Saving objects in chrome extension

When writing {objekat} it means {objekat: objekat} so you create one key 'objekat' in the storage that contains the entire object, but then you read three keys at once by using get(object) syntax so of course there's nothing as you didn't write those individual keys.

Solution:

chrome.storage.sync.get('objekat', result => {
  console.log('Value currently is ', result.objekat.Broj);
});

• The API is asynchronous so your get may be easily running before set completes. To prevent that, put the entire get block inside the callback of set.

• You can save all keys as separate entries in the storage and read them all at once or individually:

  chrome.storage.sync.set(objekat, () => {
    chrome.storage.sync.get('Broj', result => {
      console.log('Broj:', result.Broj);
    });
    chrome.storage.sync.get(objekat, result => {
      console.log('All values', result);
    });
  });
  

Adding new objects to chrome local storage

To do what you want you'll need to use an array of objects: you will get the value of the array using chrome.storage.sync.get, you'll add your new server and nickname to the array, and then use chrome.storage.sync.set to overwrite the existing value and save it.

Your array will look like this:

data = [
    {yourserver: 'server1', yournickname: 'nickname1'},
    {yourserver: 'server2', yournickname: 'nickname2'},
    {yourserver: 'server3', yournickname: 'nickname3'},
    ...
];

Here is an example of the code:

// Get all the items stored in the storage
chrome.storage.sync.get(function(items) {
    if (Object.keys(items).length > 0 && items.data) {
        // The data array already exists, add to it the new server and nickname
        items.data.push({yourserver: server, yournickname: nickname});
    } else {
        // The data array doesn't exist yet, create it
        items.data = [{yourserver: server, yournickname: nickname}];
    }

    // Now save the updated items using set
    chrome.storage.sync.set(items, function() {
        console.log('Data successfully saved to the storage!');
    });
});

Accessing a pages object using a Chrome Extension

You can try to inject a script tag in the page to access the object. If needed, you could use messaging to communicate with your extension. For example, assuming the object you want to access in your page is called pageObject:

content1.js

//this code will add a new property to the page's object
var myOwnData = "createdFromContentScript";
var myScript = document.createElement("script");
myScript.innerHTML = "pageObject.myOwnData = " + myOwnData;
document.body.appendChild(myScript);

content2.js

//this code will read a property from the existing object and send it to background page

window.addEventListener("message", function(message) {
    if (message.data.from == "myCS") {
        chrome.runtime.sendMessage({theProperty: message.data.prop});
    }
});

var myScript = document.createElement("script");
myScript.innerHTML = 'window.postMessage({from: "myCS", prop: pageObject.existingProperty},"*");';
document.body.appendChild(myScript);

---

Related Topics