Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use the following four methods to conditionally inject content into pages:</p> <pre><code>safari.extension.addContentScript safari.extension.addContentScriptFromURL safari.extension.addContentStyleSheet safari.extension.addContentStyleSheetFromURL </code></pre> <p><a href="https://developer.apple.com/library/safari/#documentation/UserExperience/Reference/ExtensionClassRef/SafariExtension.html#//apple_ref/doc/uid/TP40009681">Documentation here</a>.</p> <p>However, note that these methods <em>will not inject content into any <strong>already existing tabs</em></strong> at the time you call them. Therefore, they may not be suitable for your use case. You could use one of these methods and then reload the tab, but you may not want that because of the jarring user experience.</p> <p>Instead, you may need to use a technique like this: Have a very lightweight content script that gets injected into every page, whose only job is to listen for messages from the extension's global page and, when instructed, to create the appropriate <code>&lt;script&gt;</code> and <code>&lt;style&gt;</code> or <code>&lt;link&gt;</code> elements for the content you want to inject. Then, when your toolbar button is clicked, have the global page pass the appropriate message to the content script, perhaps including the URLs of the desired content.</p> <p>A drawback of this approach is that the injected scripts (the ones you add by creating <code>&lt;script&gt;</code> tags) will not be able to communicate directly with the global page or with other parts of the extension. If you need them to communicate, they will need to do so using <code>window.postMessage</code> or some other technique.</p> <p>Here's a minimal example. Assume your extension has a toolbar item that issues the command "inject-content". </p> <p>In the global page:</p> <pre><code>safari.application.addEventListener('command', function (evt) { safari.application.activeBrowserWindow.activeTab.page.dispatchMessage(evt.command); }, false); </code></pre> <p>In the always-injected content script:</p> <pre><code>safari.self.addEventListener('message', function (evt) { if (evt.name == 'inject-content') { var myScriptTag = document.createElement('script'); myScriptTag.src = safari.extension.baseURI + 'my_script.js'; document.body.appendChild(myScriptTag); } }, false); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload