javascriptgoogle-chrome-extensionetsy

Chrome Extension is being blocked by Etsy?


I'm trying to build a new chrome extension that adds a button to Etsy listing page. The extension is unpacked, and once installed it works great on any site. however, whatever I tried - I'm not able to see the change on Etsy.

Here is the content script that runs:

document.body.appendChild( div );
div.appendChild( btnForm );
btnForm.appendChild( btn );
div.id = 'myDivId';
div.style.position = 'fixed';
div.style.top = '50%';
div.style.left = '50%';
div.style.width = '100%';
div.style.height = '100%';
div.style.backgroundColor = 'red';

Again, this works great on any other webpage I tested. The permissions I'm using:

"permissions" : [
"declarativeContent",
"contextMenus",
"tabs",
"http://*/*",
"https://*/*"

],

Thanks!


Solution

  • Your manifiest file look like

    {
        "name": "SimplydevTranslator",
        "homepage_url": "https://github.com/bsmahala/",
        "version": "1.0",
        "permissions": [
            "*://*/*", "tabs", "webNavigation", "activeTab"
        ], 
        "content_scripts": [{
            "matches": ["*://*/*"],
            "js": ["contentscript.js"],
            "run_at": "document_idle",
            "all_frames": true
        }],
        "manifest_version": 2
    }
    

    You code must be written in

    // contentscript.js

    function appendButton() {
    
     var div= document.createElement('div');
     var btnForm  = document.createElement('div');
     var btn = document.createElement('button');
    
     document.body.appendChild( div );
     div.appendChild( btnForm );
     btnForm.appendChild( btn );
    
     div.id = 'myDivId';
     div.style.position = 'fixed';
     div.style.top = '50%';
     div.style.left = '50%';
     div.style.width = '100%';
     div.style.height = '100%';
     div.style.backgroundColor = 'red';
    
    }
    
    
    appendButton();