title: Can't find variable Safari - Safari Extension
body: <p>I am trying to build a simple safari extension. The Safari runs on the browser but i get some errors in my console saying &quot;Can't find variable Safari&quot;.</p>
  <p>According to the safari <a href="https://developer.apple.com/documentation/safariservices/safari_app_extensions/injecting_a_script_into_a_webpage" rel="nofollow noreferrer">document link</a>,I have done the below</p>
  <ol>
  <li><p>Add the script files to your extension’s Xcode target.</p>
  </li>
  <li><p>Add an SFSafariContentScript key to the NSExtension element in your extension’s Info.plist file. The value for this key is an array of dictionaries.</p>
  </li>
  </ol>
  <p>PS: i use the command <code>xcrun safari-web-extension-converter</code> to convert my chrome browser to safari extension</p>
  <p>But when i run my extension, the error <code>Cant find variable safari</code>. Any one has an idea how to resolve this ? Been on this for days.</p>
  <p><strong>manifest.json</strong></p>
  <pre><code>{
    &quot;manifest_version&quot;: 2,
    &quot;name&quot;: &quot;Spotiga&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;Musica Extension&quot;,
  
    &quot;background&quot;: {
      &quot;scripts&quot;: [&quot;background.js&quot;],
    },
  
  &quot;content_scripts&quot;:
  [
    {
      &quot;matches&quot;: [&quot;*://localhost/*&quot;],
      &quot;all_frames&quot;: true,
      &quot;js&quot;: [&quot;content_script.js&quot;],
      &quot;run_at&quot;: &quot;document_idle&quot;
    }
  ]
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>var newElement = document.createElement(&quot;img&quot;);
     newElement.src = safari.extension.baseURI + &quot;myCat.jpg&quot;;
     document.body.insertBefore(newElement,
     document.body.firstChild);
  </code></pre>