0

//scripts.js

var div = document.getElementById('divID');

div.innerHTML += trends.embed.renderWidget("dailytrends", "", {"geo":"PL","guestPath":"https://trends.google.pl:443/trends/embed/"});
//manifest.json

{
    "name": "Chrome Extension Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2,
    "page_action": {
        "default_popup": "newtab.html",
    },
    "content_scripts": [
        {
        "matches": ["https://*.gstatic.com/*", "https://*.trends.google.pl/*"],
        "js": ["scripts.js"],
        "run_at": "document_end"
        }
    ],
    "background": {
        "scripts": ["scripts.js"],
        "persistent": false
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self' https://*.gstatic.com/*"
}
//newtab.html

<!doctype html>
<html>
  <head>
    <title>Trends</title>
    <style>
       
       body { 
            width: 500px;
            height: 600px;
       }
            
    </style>
  </head>
  <body>
    <h1>Trends</h1>
    
<div id="divID"> 
</div>

  </body>
</html>

I want to run this embed code in simple chrome extension:

<script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/0dl567","geo":"US","time":"now 7-d"},{"keyword":"/m/0261x8t","geo":"US","time":"now 7-d"}],"category":0,"property":""}, {"exploreQuery":"q=%2Fm%2F0dl567,%2Fm%2F0261x8t&date=now%207-d&geo=US","guestPath":"https://trends.google.pl:443/trends/embed/"}); </script>

Can you please give me a hint on how I could do this? I can't seem to figure out proper manifest, tried background, content_scripts, content_security_policy, don't know how to properly use the hash and I keep getting console permission errors.

Thank you!

Alamo
  • 1
  • 2
  • 1
    It's not clear what the end goal is here because you also need to define `trends` object - I guess by loading a script that does it. In case of an extension page, the inline code is forbidden by default and you should use a separate js file loaded via script tag with an src attribute ([more info](https://stackoverflow.com/a/25721457)). – wOxxOm Feb 01 '19 at 07:35
  • I think the `trends` object is defined in the external `embed_loader.js`. I managed to hook the script but have no idea how to parse it, I tried:| ```var div = document.getElementById('divID'); div.innerHTML += trends.embed.renderWidget("dailytrends", "", {"geo":"PL","guestPath":"https://trends.google.pl:443/trends/embed/"});``` – Alamo Feb 01 '19 at 07:46
  • I've added the code snippet with the code I'm experimenting with. It returns no errors but doesn't display anything in the extension. – Alamo Feb 01 '19 at 07:59
  • The background page is a separate hidden page, the content scripts run in web pages - none of these will run in your page action page which is also a separate page (with its [own separate devtools](https://stackoverflow.com/a/38920982) and console). So far it sounds like you don't need neither content scripts nor the background scripts, but instead load the scripts in newtab.html using the standard script tags with src attribute. BTW the name of the page is misleading - a page action is not a tab. – wOxxOm Feb 01 '19 at 08:11

0 Answers0