Почему Spree не будет правильно оформлять заказ?

В интерфейсе chrome extension API нет правой панели.

Вы можете сделать это так же, как это делает расширение вашего примера:

1. Создать background.js прослушивание сообщений с вкладки
2. Создание сценария содержимого отправляет сообщение на background.js, если вкладка инъецируется (если вам нужно, чтобы ваша работа расширений была правильной на системных страницах)
3. Если вкладка является инъекционной, с помощью chrome.tabs.executeScript введите ваше меню div в страницу / приложение для прослушивания, которое откроет ваше меню.
4. Прибыль.

Подробнее о том, как это сделать ниже.

1. Создайте background.js прослушивание значка браузера браузера и сообщите скрипту содержимого о кликах.
2. Предотвратите показ popup.html во всплывающем окне по умолчанию.

manifest.js

....
"browser_action": {
},
"background": {
    "scripts":["background.js"]
},
...

background.js

chrome.browserAction.onClicked.addListener(function(){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id,"toggle");
    })
});

3. В content-script.js создать невидимый iframe с вашим popup.html (с помощью zero width с стилем display:none;). Я использую zero width из-за того, что вам может понадобиться оживить отображение вашего меню с помощью jquery, например, расширение для примера.
4. В контент-скрипте добавить прослушиватель сообщений для приема сообщений, отправленных из скрипта background.js.
5. При получении сообщения, покажите или скройте блок меню

content-script.js

chrome.runtime.onMessage.addListener(function(msg, sender){
    if(msg == "toggle"){
        toggle();
    }
})

var iframe = document.createElement('iframe'); 
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none"; 
iframe.src = chrome.extension.getURL("popup.html")

document.body.appendChild(iframe);

function toggle(){
    if(iframe.style.width == "0px"){
        iframe.style.width="400px";
    }
    else{
        iframe.style.width="0px";
    }
}

6. Создайте popup.html и скрипты, которые вы загружаете из контекст расширения, видимый для контекста браузера html:

manifest.json

"web_accessible_resources": ["popup.html"]

Подробнее

1. API Chrome Tabs: https://developer.chrome.com/extensions/tabs
2. Передача сообщений в Chrome: https://developer.chrome.com/extensions/messaging
3. Обработка кликов с помощью браузера: https://developer.chrome.com/extensions/browserAction#event-onClicked
4. Вставка содержимого скрипта: https : //developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript